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

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

8 70
html css wkhtmltopdf

8 ответов:

вы можете попробовать это с помощью 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, как показано выше.

56

лучший способ, который я нашел для решения этой проблемы в браузерах webkit, - это поместить div внутри каждого элемента td и применить page-break-inside: avoid style к 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 предположительно не распознает свойство " page-break-inside: avoid;", это, по-видимому, удерживает содержимое строки от разделения пополам разрывом страницы при использовании wktohtml для создания PDF-файлов. Элемент tr может немного зависать над страницей, но div и все такое внутри его не будет.

26

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

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

Я написал следующий 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.

7

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

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

6

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

5

Я нашел новый способ решить эту проблему, по крайней мере для меня (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 за решение проблемы!

5

попробовать 

white-space: nowrap;

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

3