Я хочу избежать разрыва страницы внутри строки таблицы в html, когда я конвертирую html в PDF с помощью wkhtmltopdf. Я использую page-break-inside: избегайте с таблицей - это работает, но у меня так много строк, что не работает. Если установить отображение tr как блока или что-то еще, тогда он изменит форматирование таблицы и вставит двойную границу. Или можно вставить заголовок таблицы на каждую страницу, где таблица была разбита.
html
css
wkhtmltopdf
Анкит Миттал
источник
источник
page-break-inside: avoid;
?page-break-inside:avoid
со всеми элементами таблицы, такими как tr td, но это не сработало.Ответы:
Вы можете попробовать это с помощью CSS:
Большинство правил CSS не применяются к
<tr>
тегам напрямую из-за того, что вы указали выше - у них есть уникальныйdisplay
стиль, который не позволяет применять эти правила CSS. Тем не менее,<td>
и<th>
метки в них , как правило , делают позволяют этот вид спецификации - и вы можете легко применить такие правила для всех детей -<tr>
х и<td>
'ы с помощью CSS , как показано выше.источник
Лучший способ, который я нашел для решения этой проблемы в браузерах webkit, - это поместить div внутри каждого элемента td и применить page-break-inside: избегайте стиля к div, например:
Несмотря на то, что Chrome предположительно не распознает «разрыв страницы внутри: избежать;» свойство, похоже, это предотвращает разделение содержимого строки пополам разрывом страницы при использовании wktohtml для создания PDF-файлов. Элемент tr может немного висеть над разрывом страницы, но div и все, что внутри него, нет.
источник
margin: 4px 0 4px 0;
помогло мне, я иногда проигрывал пластинки. СпасибоЯ использовал трюк 4px от @AaronHill выше ( ссылка ), и он сработал очень хорошо! Я использовал более простое правило css без необходимости добавлять класс для каждого
<td>
в таблице.источник
Я нашел новый способ решить эту проблему, по крайней мере, для меня (версия Chrome 63.0.3239.84 (официальная сборка) (64-разрядная версия) на MacOS Sierra)
Добавьте правило CSS в родительскую таблицу:
и для тд:
Я действительно нашел это решение в Stack Overflow, но оно не отображалось при первоначальном поиске Google: CSS для остановки разрыва страницы внутри строки таблицы
Престижность @ Ibrennan208 за решение проблемы!
источник
Использование CSS page-break-inside не работает (это проблема браузера webkit).
Существует способ разбиения таблицы wkhtmltopdf JavaScript, который автоматически разбивает длинную таблицу на более мелкие таблицы в зависимости от указанного вами размера страницы (вместо разрыва страницы после статического значения x строк): https://gist.github.com/3683510
источник
Я написал следующий JavaScript на основе ответа Аарона Хилла:
Где dontSplit - это класс таблицы, в которой вы не хотите, чтобы td разделялись по страницам. Используйте это со следующим CSS (опять же, приписываемым Аарону Хиллу):
Кажется, это хорошо работает в последней версии Chrome.
источник
Единственный способ, которым я нашел работу, - это разместить каждый элемент TR внутри своего собственного элемента TBODY и применить правила разрыва страницы к элементу TBODY через css.
источник
tbody
, внутриtable
stackoverflow.com/questions/3076708/...Попробуйте с
style в td, чтобы он не разбивался на новые строки.
источник
Я обнаружил, что
page-break-inside: avoid
это не сработает, если любой из родительских элементов таблицы -display: inline-block
илиflex
. Убедитесь, что все родительские элементыdisplay: block
.Также рассмотрим переопределение
table
,tr
,td
«sdisplay
стилей с помощью CSSgrid
для макета печати , если вы сохраняете возникли проблемы с таблицей.источник
Решение 2020 года
Единственное, что я мог постоянно заставить работать во всех браузерах, - это помещать каждую строку в отдельный элемент таблицы . Это также работает с узлом HTML-PDF. Затем просто установите все на
page-break-inside: avoid
.Единственный минус в том, что вы должны вручную устанавливать ширину столбцов, иначе это выглядит довольно странно. Следующее сработало для меня с двумя столбцами.
пример
источник
Это старый вопрос, но недавно я столкнулся с той же ошибкой. В моем случае проблема была связана с
table-responsive
классом Bootstrap , который случайно использовался в<table>
элементе.Итак, если у вас такая же проблема, попробуйте удалить
table-responsive
из<table>
класса при вызове wkhtmltopdf.источник