Html-таблица разрывает строку при печати

В настоящее время у меня возникают некоторые проблемы с таблицей, которую я пытаюсь распечатать, если в ней более одной страницы, на разрыве страницы строка таблицы обрезается. Я уже пробовал использовать table { page-break-inside:auto } и tr { page-break-inside:avoid; page-break-after:auto }, но ни один из них не работал.

Это может быть что-то в конфликте с моим css?

Вот Jsfiddle с ним: ссылка Jsfiddle


html css printing css-tables
person Rafael    schedule 24.08.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Измените свой CSS на это

 @media print {

  table.report { page-break-after:auto }
  table.report tr    { page-break-inside:avoid; page-break-after:auto }
  table.report td    { page-break-inside:avoid; page-break-after:auto }
  table.report thead { display:table-header-group }
  table.report tfoot { display:table-footer-group }
 }

а также удалить все лишнее

<tbody>...</tbody>

, у вас должен быть только один

<tbody></tbody>

и все тр между тем.

это должно сработать для вас.

ссылка: https://www.w3.org/TR/css-print/

person Majid    schedule 24.08.2016
comment
Спасибо! Я изменил css на тот, который вы разместили, и добавил height: 100%; в css. Это работало на Windows, но на Mac, в тех же браузерах обрезка происходит не к месту, как на этом изображении: ссылка - person Rafael; 24.08.2016
comment
какие браузеры вы тестировали? можешь сделать скриншот и скинуть сюда как ссылку? - person Majid; 25.08.2016
comment
Мне удалось исправить это, используя размер листа A4 по ширине и высоте в @media print css. Спасибо, в любом случае! - person Rafael; 25.08.2016
comment
В моем случае мне не нужно было определять разрыв для td, достаточно было сделать это для tr - person jediz; 08.05.2018