Избегать разрыва страницы внутри строки таблицы
Я хочу избежать разрыва страницы внутри строки таблицы в html, когда я конвертирую html в PDF с помощью wkhtmltopdf. Я использую разрыва страницы: избегать с таблицей - ее работы, но у меня так много строк, то не работают. Если установить отображение tr в качестве блока или чего-то еще, то это изменит форматирование таблицы и вставит двойную рамку. Или можно вставить заголовок таблицы на каждую страницу, где таблица была разбита.
13 ответов
Вы можете попробовать это с помощью CSS:
<table class="print-friendly">
<!-- The rest of your table here -->
</table>
<style>
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
</style>
Большинство правил CSS не применяются к <tr> непосредственно из-за того, что вы указали выше - они имеют уникальный display стиль, который не учитывает эти правила CSS. Тем не менее <td> а также <th> теги внутри них обычно допускают такую спецификацию, и вы можете легко применять такие правила ко ВСЕМ дочерним <tr> и <td> Использует CSS, как показано выше.
Лучший способ, который я нашел для решения этой проблемы в браузерах webkit, - это поместить div внутри каждого элемента td и применить разделение страницы внутрь: избегать стиля в div, например:
...
<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>
Хотя Chrome якобы не распознает "разрыв страницы: избегать"; Это свойство предотвращает разделение содержимого строки пополам разрывом страницы при использовании wktohtml для создания PDF-файлов. Элемент tr может немного повиснуть над разрывом страницы, но div и все, что внутри него, не будут.
Я использовал трюк 4px @AaronHill выше ( ссылка), и он работал очень хорошо! Я использовал более простое правило CSS, не добавляя класс к каждому <td> в таблице.
@media print {
table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}
}
Я нашел новый способ решения этой проблемы, по крайней мере для меня (Chrome Версия 63.0.3239.84 (Официальная сборка) (64-разрядная версия) на MacOS Sierra)
Добавьте правило CSS в родительскую таблицу:
table{
border-collapse:collapse;
}
и для тд:
tr td{
page-break-inside: avoid;
white-space: nowrap;
}
На самом деле я нашел это решение при переполнении стека, но оно не появилось в начальных поисках Google: CSS, чтобы остановить разрыв страницы внутри строки таблицы
Слава @Ibrennan208 за решение проблемы!
Я обнаружил что page-break-inside: avoid не будет работать, если любой из родительских элементов таблицы display: inline-block или flex. Убедитесь, что все родительские элементыdisplay: block.
Также рассмотрите возможность переопределения table, tr, tdс display стили с CSS grid для макета печати, если у вас по-прежнему возникают проблемы с таблицей.
Единственный способ, который я нашел для работы, - это поместить каждый элемент TR в его собственный элемент TBODY и применить правила разрыва страницы к элементу TBODY через css.
Использование CSS-разрыва страницы не будет работать (это проблема браузера webkit).
Существует способ разделения таблиц JavaScript в wkhtmltopdf, который автоматически разбивает длинную таблицу на меньшие таблицы в зависимости от размера страницы, который вы укажете (вместо разрыва страницы после статического значения x строк): https://gist.github.com/3683510
Решение 2020 года
Единственное, что я мог постоянно заставить работать во всех браузерах, - это помещать каждую строку в отдельный элемент таблицы. Это также работает с узлом HTML-PDF. Тогда просто установите все наpage-break-inside: avoid.
table,
tr,
td,
div {
page-break-inside: avoid;
}
Единственный минус в том, что вы должны вручную устанавливать ширину столбцов, иначе это выглядит довольно странно. Следующее сработало для меня с двумя столбцами.
td:first-child { width: 30% }
td:last-child { width: 70% }
пример
<table>
<tr>
<td>Forename</td>
<td>John</td>
</tr>
</table>
<table>
<tr>
<td>Surname</td>
<td>Piper</td>
</tr>
</table>
<table>
<tr>
<td>Website</td>
<td>desiringgod.org</td>
</tr>
</table>
Я написал следующий JavaScript на основе ответа Аарона Хилла:
//Add a div to each table cell so these don't break across pages when printed
//See http://stackru.com/a/17982110/201648
$(document).ready(function () {
var ctlTd = $('.dontSplit td');
if (ctlTd.length > 0)
{
//console.log('Found ctlTd');
ctlTd.wrapInner('<div class="avoidBreak" />');
}
});
Где dontSplit - это класс таблицы, где вы не хотите, чтобы тд делились по страницам. Используйте это со следующим CSS (снова приписывается Aaron Hill):
.avoidBreak {
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 */
}
Похоже, что это работает хорошо в последней версии Chrome.
Попробуй с
white-space: nowrap;
стиль, чтобы тд, чтобы не ломаться на новых линиях.
Вот что сработало для меня:
@media all {
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 }
}
Чтобы избежать неправильных разрывов страниц со строками таблицы, необходимо использовать приведенный ниже CSS при создании PDF-файлов из HTML.
Это старый вопрос, но недавно я столкнулся с той же ошибкой. Проблема в моем случае была связана с Bootstraptable-responsive класс, который случайно использовался на <table> элемент.
Итак, если у вас такая же проблема, попробуйте удалить table-responsive от <table> class при вызове wkhtmltopdf.