Применение "разрыва страницы" к строке таблицы (tr)

Согласно W3.org, стиль page-break-after применяется к элементам уровня блока ( http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html)

<tr> является элементом уровня блока (согласно этому: http://www.htmlhelp.com/reference/html40/block.html, это так)

Я делаю это, но разрыв страницы не создает фактический разрыв страницы при печати:

  <table>
    <tr><td>blah</td></tr>
    <tr><td>blah</td></tr>
    <tr style="page-break-after: always"><td>blah</td></tr>
    <tr><td>blah</td></tr>
  </table>

Я делаю это правильно?

Если <tr> не был элементом уровня блока: как мне добиться этого разрыва страницы?

Примечание: код before - это только пример, но я пытаюсь сделать разметку страницы каждые 5 строк таблицы, поэтому, если вы знаете какие-либо советы для этого случая, мы будем благодарны

Источник

2 ответа

Решение

Внутри <head>установить этот стиль

<head>
    <style>
        @media print {
            tr.page-break  { display: block; page-break-before: always; }
        }   
    </style>
</head>

Таким образом, он произведет разрыв страницы во время печати прямо перед строкой таблицы.

<tr class="page-break">
</tr>
Источник

Сайт, на который вы ссылаетесь, утверждает, что <tr> " также может рассматриваться как элемент уровня блока, так как он может содержать элементы уровня блока". Ни в документах W3.org, ни в Mozilla не указано, что <tr> является элементом уровня блока.

Некоторые возможные решения

  1. Основываясь на формулировке и вашем примере, я хотел бы убедиться, что ячейка содержит истинный элемент уровня блока. Вот два примера использования <h1> а также <p> которые являются текстовыми элементами уровня блока.

    <tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>

  2. Другие сообщали о похожих проблемах, и одно из решений может помочь вам.

  3. Как упоминалось в Mr Lister, вы можете попытаться перехватить действие печати или создать печатную версию страницы, которая бы отделяла таблицу, чтобы вы могли получить желаемый разрыв страницы после каждых пяти строк.

Источник

Установить все <tr> теги с display:block и определите формат страницы и размер в мм для таблицы и ячеек.

Вот <td> ширина тега установлена ​​на 23 мм, поскольку есть теги 10 td с отступом 2 мм с каждой стороны (23+2+2)*10=270, что составляет <table> ширина.

Вы можете настроить word-break в зависимости от того, как вы хотите разбить слова.

@media print {

    @page {
        size:A4 landscape;
        margin: 5mm 5mm 5mm 5mm;
        padding: 0mm 0mm 0mm 0mm;
    }
    .table{
        width:270mm;
        min-width:270mm;
    }
    td, th{
        padding: 2mm 2mm 2mm 2mm !important;
        display: table-cell;
        word-break:break-all;
        width:23mm;
        min-width:23mm;
    }
    tr{
       display:block;
    }
    tr.page-break  { 
       page-break-before: always; 
    }
}
Источник
Другие вопросы по тегам