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

97

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

Анкит Миттал
источник
1
Извините, а в чем проблема при использовании page-break-inside: avoid;?
Кристиан,
2
@ChristianVarga, когда я использую разрыв страницы внутри: избегайте с tr, это не работает
Анкит Миттал
1
Разрыв страниц с таблицами довольно глючный. Взгляните на этот обходной код
Йона,
2
на самом деле я пробовал page-break-inside:avoidсо всеми элементами таблицы, такими как tr td, но это не сработало.
Анкит Миттал
3
Ура, Google для WebGL, невероятно быстрый javascript, портативный собственный клиент, но мы все еще не можем печатать таблицы данных. Кому нужно это делать ??? Только почти каждый бизнес в мире. Между прочим, я только что пытался распечатать электронную таблицу в документах Google, и это постоянно приводит к сбою моего Chrome. Я думаю, что google docs печатает через pdf. : /
Сэм Уоткинс

Ответы:

74

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

Трой Элфорд
источник
18
К сожалению, это (пока) не работает с браузерами на основе webkit.
Аттила Фулоп,
2
Да, есть странности. См. Ответ @ Peter в этом вопросе: stackoverflow.com/questions/7706504/… для получения дополнительной информации.
Трой Алфорд
3
Это работает, только если вы берете всю таблицу, а не только tr / td: stackoverflow.com/a/13525758/729324
marcovtwout
1
У меня возникли проблемы с этим в IE8, возможно, в других, где это заставляет всю таблицу пытаться уместиться на одной странице и предотвращает любое переполнение. Также казалось, что игнорируется опция «подогнать масштаб» для этих таблиц.
Tom Pietrosanti
6
@AttilaFulop Все еще? Вашему сообщению 3 года, и я все еще не могу заставить его работать. Спасибо
relipse
32

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

Аарон Хилл
источник
Это margin: 4px 0 4px 0;помогло мне, я иногда проигрывал пластинки. Спасибо
Wartodust
Проблема с этим подходом заключается в том, что иногда только несколько ячеек строки переходят на следующую страницу, хотя каждая ячейка сама по себе не будет разбита.
WorldSEnder
@WorldSEnder Да. Вы нашли обходной путь для этого?
ranjansaga
4
Не работает. Ничего не работает. Я перепробовал все "решения" в Интернете, но решения нет. Нам просто нужно принять хреновое программное обеспечение, которое не может даже отображать таблицу.
Никлас Р.
18

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

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}
фидий
источник
10

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

Джейсон Сильвер
источник
решена проблема с строкой стола для резки, которая сломалась, другой дизайн
aviboy2006 03
9

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

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

Ричард Пурсхаус
источник
Этот js-хакер будет работать, если я просто хочу распечатать веб-страницу без wkhtmltopdf?
120196,
Это единственное, что у меня сработало. Также работает с библиотекой HTML-PDF.
gilbert-v
8

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

Аарон Ньютон
источник
1
Я визуализирую большие таблицы в формате PDF с помощью wkhtmltopdf, и это единственное решение, которое дало приемлемые результаты. Было бы лучше (Webkit не повторяет границы ячеек после разрыва страницы), но, по крайней мере, контент есть. Спасибо!
Джонатон Хилл
7

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

Трой Морхаус
источник
1
У меня это работает лучше, чем все остальное, на Chromium версии 40.0.2214.111 (64-бит) в Arch Linux. Это уродливо и кажется хакерским, но, по-видимому tbody, внутри table stackoverflow.com/questions/3076708/...
ElDog
У меня это не работает (Chrome 56.0.2924.87 (64-разрядная версия), Mac OS 10.12.2).
Dinh
4

Попробуйте с

white-space: nowrap; 

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

Vinayakshukre
источник
1
Намного проще, чем другие решения. Это новинка?
bendecko
3

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

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

Стивен Сосье
источник
3

Решение 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>
Gilbert-V
источник
Не могли бы вы предоставить пример таблицы HTML? Спасибо.
Паван Бушан,
Спасибо @ gilbert-v за редактирование с примером. Я попробую это.
PavanBhushan,
0

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

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

Лаэрт
источник