Как применить разрыв страницы CSS для печати таблицы с большим количеством строк?

Ответ 1

Вы можете использовать следующее:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

Подробнее см. спецификацию W3C CSS Print Profile.

И также откройте форумы разработчиков Salesforce.

Ответ 2

Если вы хотите применить разрыв, либо table, либо tr, вам нужно предоставить класс для ex. page-break с CSS, как указано ниже:

/* class works for table row */
table tr.page-break{
  page-break-after:always
} 

<tr class="page-break">

/* class works for table */
table.page-break{
  page-break-after:always
}

<table class="page-break">

и он будет работать так, как вам нужно

В качестве альтернативы вы также можете иметь структуру div для нее:

CSS

@media all {
 .page-break  { display: none; }
}

@media print {
 .page-break  { display: block; page-break-before: always; }
}

Div:

<div class="page-break"></div>

Ответ 3

Я искал решение об этом. У меня есть мобильный сайт jquery, который имеет окончательную страницу печати и объединяет десятки страниц. Я испробовал все исправления выше, но единственное, что я мог получить, это следующее:

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>

Ответ 4

К сожалению, приведенные выше примеры не работали для меня в Chrome.

Я придумал решение ниже, где вы можете указать максимальную высоту в PX каждой страницы. Затем он разбивает таблицу на отдельные таблицы, когда строки равны этой высоте.

$(document).ready(function(){

    var MaxHeight = 200;
    var RunningHeight = 0;
    var PageNo = 1;

    $('table.splitForPrint>tbody>tr').each(function () {

        if (RunningHeight + $(this).height() > MaxHeight) {
            RunningHeight = 0;
            PageNo += 1;
        }

        RunningHeight += $(this).height();

        $(this).attr("data-page-no", PageNo);

    });

    for(i = 1; i <= PageNo; i++){

        $('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");

        var rows = $('table tr[data-page-no="' + i + '"]');

        $('#Table' + i).find("tbody").append(rows);
    }
    $('table.splitForPrint').remove();

});

Вам также понадобится следующее в таблице стилей

    div.tablePage {
        page-break-inside:avoid; page-break-after:always;            
    }

Ответ 5

это работает для меня:

<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

Из этой темы: избегать разрыва страницы внутри строки таблицы

Ответ 6

Если вы знаете, сколько вы хотите на странице, вы всегда можете сделать это. Он начнет новую страницу после каждого 20-го элемента.

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}

Ответ 7

Вы должны использовать

<tbody> 
  <tr>
  first page content here 
  </tr>
  <tr>
  ..
  </tr>
</tbody>
<tbody>
  next page content...
</tbody>

И CSS:

tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }

Ответ 8

Вот пример:

Через css:

<style>
  .my-table {
    page-break-before: always;
    page-break-after: always;
  }
  .my-table tr {
    page-break-inside: avoid;
  }
</style>

или непосредственно на элементе:

<table style="page-break-before: always; page-break-after: always;">
  <tr style="page-break-inside: avoid;">
    ..
  </tr>
</table>