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

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

6 56
html css css-tables printing page-break

6 ответов:

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

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

обратитесь к W3C профиль печати CSS спецификация для детали.

и передать Salesforce Developer forums.

93

везде, где вы хотите применить перерыв, либо 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>
15

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

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

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

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

$(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;            
    }
8

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

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

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

0

вот пример:

через 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>
-1