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

Question

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

Answer 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 допускают такую ​​спецификацию - и вы можете легко применять такие правила ко ВСЕМ дочерним * <tr> и <td>, использующимCSS, как показано выше.

Answer 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 и все, что внутри него, не будут.

Answer 3

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

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

Answer 4

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

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

table{
    border-collapse:collapse;
}

и для td:

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

Попробуйте использовать стиль

white-space: nowrap; 

для td, чтобы избежать появления новых строк.