Я хочу избежать разрыва страницы внутри строки таблицы в html, когда я конвертирую html в PDF с помощью wkhtmltopdf. Я использую page-break-inside: избегайте с таблицей - это работает, но у меня так много строк, что не работает. Если установить отображение tr как блока или что-то еще, тогда он изменит форматирование таблицы и вставит двойную границу. Или можно вставить заголовок таблицы на каждую страницу, где таблица была разбита.

Вы можете попробовать это с помощью 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 и применить page-break-inside: избегайте стиля к 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;
}

Я действительно нашел это решение в Stack Overflow, но оно не отображалось при первоначальном поиске Google: CSS для остановки разрыва страницы внутри строки таблицы

Престижность @ Ibrennan208 за решение проблемы!

Использование CSS page-break-inside не работает (это проблема браузера webkit).

Существует способ разбиения таблицы wkhtmltopdf JavaScript, который автоматически разбивает длинную таблицу на более мелкие таблицы в зависимости от указанного вами размера страницы (вместо разрыва страницы после статического значения x строк): https://gist.github.com/3683510

Я написал следующий JavaScript на основе ответа Аарона Хилла:

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.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 - это класс таблицы, в которой вы не хотите, чтобы td разделялись по страницам. Используйте это со следующим CSS (опять же, приписываемым Аарону Хиллу):

 .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.

Единственный способ, которым я нашел работу, - это разместить каждый элемент TR внутри своего собственного элемента TBODY и применить правила разрыва страницы к элементу TBODY через css.

Попробуйте с

white-space: nowrap; 

style в td, чтобы он не разбивался на новые строки.

Я обнаружил, что page-break-inside: avoidэто не сработает, если любой из родительских элементов таблицы - display: inline-blockили flex. Убедитесь, что все родительские элементыdisplay: block .

Также рассмотрим переопределение table, tr, td«s displayстилей с помощью CSS gridдля макета печати , если вы сохраняете возникли проблемы с таблицей.

Решение 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>

Это старый вопрос, но недавно я столкнулся с той же ошибкой. В моем случае проблема была связана с table-responsiveклассом Bootstrap , который случайно использовался в <table>элементе.

Итак, если у вас такая же проблема, попробуйте удалить table-responsiveиз <table>класса при вызове wkhtmltopdf.