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

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

Источник

11 ответов

Решение

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

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

За подробностями обращайтесь к спецификации W3C CSS Print Profile.

А также обратитесь к форумам разработчиков 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:

<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;            
    }
Источник

При преобразовании в PDF с помощью SelectPdf я не мог заставить группу строк оставаться вместе. Пытался поставить их в <div style="break-inside: avoid;">но это не сработало.

Ничего не работало, пока я не нашел это: /questions/35204725/izbegat-razryiva-stranitsyi-vnutri-stroki-tablitsyi/35204753#35204753
Что заставило меня переосмыслить свою логику и поместить то, что я не хотел разбивать, в файл .

      <table>
  <thead style="display: table-header-group;">
    <tr>
      <th></th>
    </tr>
  </thead>

-- Repeating content --
  <tbody style="break-inside: avoid;">
    -- First row from group --
    <tr>
      <td> Only shown once per group </td>
    </tr>

    -- Repeating rows --
    <tr>
      <td> Shown multiple times per group </td>
    </tr>
  </tbody>

В результате получается таблица с несколькими <tbody>но это совершенно нормально, так как многие люди используют именно этот шаблон для группировки строк.

Источник

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

<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;
}
Источник

В конце концов я понял, что мой объемный контент, который переполняет таблицу и не ломается должным образом, просто не обязательно должен находиться внутри таблицы.

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

Надеюсь, это кому-то поможет... удачи!

Источник

Мы пробовали множество различных решений, упомянутых здесь и в других местах, и ничего не помогло нам. Однако в конце концов мы нашли решение, которое сработало для нас, и для нас это каким-то образом кажется проблемой Angular. Я не понимаю, почему это работает, но для нас это работает, и в конце концов нам не понадобился какой-либо css для разрыва страницы.

      @media print {
    ng-component {
        float: left;
    }
}

Так что просто надеюсь, что это поможет кому-то еще, поскольку нам потребовались дни, чтобы исправить.

Источник

Вот пример:

Через 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; }
Источник
Другие вопросы по тегам