Як застосувати розрив сторінки CSS для друку таблиці з великою кількістю рядків?

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

Ви можете використовувати наступне:

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

Для отримання детальної інформації зверніться до специфікації профілю друку CSS W3C .

А також перегляньте форуми розробників Salesforce .

Скрізь , де ви хочете застосувати перерву, або 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 class="page-break"></div>

Я подивився навколо, щоб виправити це. У мене є мобільний сайт jquery, який має остаточну сторінку для друку, і він об’єднує десятки сторінок. Я спробував усі виправлення вище, але єдине, до чого я міг приступити до роботи, це:

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

На жаль, наведені вище приклади не працювали для мене в 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;            
    }

це працює для мене:

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

З цієї теми: уникайте розриву сторінки всередині рядка таблиці

Якщо ви знаєте, скільки ви хочете на сторінці, ви завжди можете це зробити. Він почне нову сторінку після кожного 20-го елемента.

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

Врешті-решт я зрозумів, що мій масовий вміст, який переповнює стіл і не ламається належним чином, просто навіть не повинен знаходитися всередині таблиці.

Хоча це не технічне рішення, воно вирішило мою проблему - просто закінчити таблицю, коли таблиця мені більше не потрібна; потім розпочав новий для нижнього колонтитула.

Сподіваюся, це комусь допоможе ... удачі!

Ось приклад:

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

Ви повинні використовувати

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