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

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

<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> не был элементом блочного уровня: как мне добиться разрыва страницы?

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


css page-break
person sports    schedule 09.12.2013    source источник
comment
Функции печати плохо реализованы в браузерах; вы получаете все виды несовместимости. Если вы строите таблицу программно, я бы предложил разбить ее на более мелкие таблицы, по 5 строк в каждой, и поместить между ними разрывы страниц.   -  person Mr Lister    schedule 10.12.2013
comment
Разрезание его на более мелкие таблицы будет видно в html-версии (перед печатью) :(   -  person sports    schedule 11.12.2013
comment
Потом разрезать их только при печати...   -  person Mr Lister    schedule 12.12.2013

Ответы (3)


arrow_upward
14
arrow_downward

Внутри <head> установите этот стиль в таблице стилей CSS.

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

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

<tr class="page-break">
</tr>
person guest    schedule 12.05.2014
comment
Кроме того (чтобы предотвратить уродливые tds из-за tr, который является блоком отображения), я вставил пустой tr с классом «разрыв страницы» и высотой = 0. - person phikes; 04.12.2014
comment
Вы также можете использовать псевдоэлемент, чтобы избежать необходимости в пустом tr: @media print { tr.page-break:before { content:""; display: block; page-break-before: always; } } - person Mike Godin; 15.07.2016
comment
На самом деле это не работает и ничего не меняет, по крайней мере, в Chrome 50 с чем-то. - person Jason C; 12.07.2017
comment
Работает в Firefox (без необходимости устанавливать ‹tr› на display: block). Не работает в Хроме или Опере. - person Jon Fergus; 14.08.2020

arrow_upward
2
arrow_downward

На указанном вами сайте указано, что <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. Как упоминалось в разделе My Lister, вы можете попытаться поймать действие печати или создать версию страницы для печати, которая отделит таблицу, чтобы вы могли получить желаемый разрыв страницы через каждые пять рядов.

person JSuar    schedule 05.01.2014

arrow_upward
1
arrow_downward

Установите все теги <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; 
    }
}
person Ludo    schedule 16.04.2020