Избегать разрыва страницы внутри строки таблицы

Ответ 1

Вы можете попробовать это с помощью 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> внутри них обычно do допускают эту спецификацию - и вы можете легко применять такие правила для ALL child- <tr> и <td>, используя CSS, как показано выше.

Ответ 2

Лучший способ, которым я нашел решение этой проблемы в браузерах 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 и ничего внутри него не будут.

Ответ 3

Я использовал трюк 4px от @AaronHill выше (ссылка), и он работал очень хорошо! Я использовал более простое правило CSS, не добавляя класс в каждый <td> в таблице.

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

Ответ 4

Я нашел новый способ решения этой проблемы, по крайней мере для меня (Chrome версии 63.0.3239.84 (официальная сборка) (64-разрядная версия) на MacOS Sierra)

Добавьте правило CSS в родительскую таблицу:

table{
    border-collapse:collapse;
}

и тд:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

Я нашел это решение в Qaru, но оно не появилось в начальных поисках Google: CSS, чтобы остановить разрыв страницы внутри строки таблицы

Слава @Ibrennan208 за решение проблемы!

Ответ 5

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

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

Ответ 6

Я написал следующий 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 (опять же, приписываемым 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.

Ответ 7

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

Ответ 8

Попробуйте

white-space: nowrap; 

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

Ответ 9

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

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