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

Question

У меня есть динамическая таблица на моей веб-странице, которая иногда содержит много строк. Я знаю, что есть page-break-before и page-break-after свойства CSS. Где я могу разместить их в своем коде, чтобы принудительно разбить страницу при необходимости?

Answer 1

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

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

Подробнее см. В спецификации W3C Профиль печати CSS .

А также на форумах разработчиков Salesforce.

Answer 2

Везде, где вы хотите применить перерыв, table или tr, вы должны дать класс для отл.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>

Answer 3

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

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

Answer 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;            
    }

Answer 5

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

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

Answer 6

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

<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>

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

Answer 7

Вот пример:

Через 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>