Я хочу уникнути розриву сторінки всередині рядка таблиці в html, коли я перетворюю html у PDF за допомогою wkhtmltopdf. Я використовую розбиття сторінок: уникайте з таблицею - це працює, але у мене так багато рядків, то не працює. Якщо встановити відображення 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 та застосувати сторінку-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;
}

а для td:

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

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

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

Використання CSS-прориву сторінки не буде працювати (це проблема веб-браузера).

Існує хак 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 to 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>