Как бороться с разрывами страниц при печати больших таблиц HTML
У меня есть проект, который требует печати таблицы HTML с большим количеством строк.
Моя проблема в том, как таблица печатается на нескольких страницах. Иногда он разрезает строку пополам, что делает его нечитаемым, потому что одна половина находится на переднем крае страницы, а остальная часть напечатана в верхней части следующей страницы.
Единственное правдоподобное решение, которое я могу придумать, - это использовать сложенные DIV вместо таблицы и принудительно разрывать страницы, если это необходимо... но перед тем, как пройти через все изменения, я подумал, что могу спросить здесь раньше.
13 ответов
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Примечание: при использовании разрыва страницы: всегда для тега он создает разрыв страницы после последнего бита таблицы, каждый раз создавая полностью пустую страницу в конце! Чтобы это исправить, просто измените его на разрыва страницы: авто. Он будет правильно разорван и не создаст лишнюю пустую страницу.
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
Расширение от решения Синан Юнюр:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Кажется, что page-break-inside:avoid в некоторых браузерах учитывается только для элементов блока, а не для ячейки, таблицы, строки или встроенного блока.
Если вы попытаетесь display:block TR тег и использовать там page-break-inside:avoid, это работает, но портит ваш макет таблицы.
Ни один из ответов здесь не работал для меня в Chrome. AAverin на GitHub создал несколько полезных Javascript для этой цели, и это сработало для меня:
Просто добавьте js в ваш код и добавьте класс "splitForPrint" к вашей таблице, и он аккуратно разделит таблицу на несколько страниц и добавит заголовок таблицы на каждую страницу.
Я недавно решил эту проблему с хорошим решением.
CSS:
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS:
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
Работает как шарм!
Используйте эти свойства CSS:
page-break-after
page-break-before
Например:
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
Я закончил тем, что следовал подходу @vicenteherrera, с некоторыми изменениями (которые, возможно, специфичны для начальной загрузки 3).
В принципе; мы не можем сломаться trс или tdпотому что они не являются элементами блочного уровня. Итак, мы встраиваем divS в каждом, и применить наши page-break-* правила против div, Во-вторых, мы добавляем некоторые отступы к вершине каждого из этих элементов, чтобы компенсировать любые артефакты моделирования.
<style>
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
Корректировка полей и отступов была необходима, чтобы компенсировать какое-то дрожание, которое было введено (по моему мнению - из начальной загрузки). Я не уверен, что представляю какое-либо новое решение из других ответов на этот вопрос, но я думаю, что это может кому-то помочь.
Я столкнулся с той же проблемой и повсюду искал решение, наконец, я нашел то, что работает для меня во всех браузерах.
html {
height: 0;
}
используйте этот css или вместо css вы можете использовать этот javascript
$("html").height(0);
Надеюсь, это сработает и для вас.
У меня такая проблема с лицом. Вы можете решить эту проблему, используя свойства CSS.
@media print {
table{page-break-after: auto;}
}
Примечание. Это свойство нельзя использовать с пустыми или абсолютно позиционированными элементами.
Я проверил много решений, и никто не работал хорошо.
Итак, я попробовал маленький трюк, и он работает:
Tfoot со стилем: position: fixed; bottom: 0px; размещается внизу последней страницы, но если нижний колонтитул слишком высокий, он перекрывается содержимым таблицы.
Tfoot только с: display: table-footer-group; не перекрывается, но не в нижней части последней страницы...
Давайте поставим два tfoot:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>Один резервирует место на не последних страницах, второй добавляет ваш обычный нижний колонтитул.
Я перепробовал все предложения, приведенные выше, и нашел простое и работающее кросс-браузерное решение для этой проблемы. Для этого решения не требуется стили или разрыв страницы. Для решения формат таблицы должен быть таким:
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
Над форматом проверено и работает в кросс-браузерах
Ну, ребята... Большинство решений здесь не работали. Так вот как у меня все получалось..
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
Первый набор заголовков используется как фиктивный, чтобы во время разрыва страницы не было отсутствующей верхней границы во 2-й главе (т.е. исходной голове).
Принятый ответ не работал для меня во всех браузерах, но у меня работал следующий css:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
Структура HTML была:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
В моем случае были некоторые дополнительные проблемы с thead tr, но это решило изначальную проблему предотвращения разбивки строк таблицы.
Из-за проблем с заголовком я в итоге получил:
#theTable td *
{
page-break-inside:avoid;
}
Это не мешало ряду ломаться; только содержание каждой ячейки.