Chcę uniknąć podziału strony w wierszu tabeli w html, kiedy konwertuję HTML na PDF za pomocą wkhtmltopdf. Używam łamania strony wewnątrz: unikaj z tabelą - to działa, ale mam tak wiele wierszy, więc nie działa. Jeśli ustawisz wyświetlanie tr jako blok lub coś innego, zmieni to formatowanie tabeli i wstawia podwójne obramowanie. Lub możliwe jest wstawienie nagłówka tabeli na każdej stronie, na której tabela została podzielona.

Możesz spróbować tego z 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>

Większość reguł CSS nie ma <tr>bezpośredniego zastosowania do tagów, z powodu dokładnie tego, co wskazałeś powyżej - mają unikalny displaystyl, który nie pozwala na te reguły CSS. Jednak <td>i <th>tagi w nich zwykle zrobić umożliwiają tego rodzaju specyfikacji - i można łatwo zastosować takie reguły do wszystkich idealny dla całych <tr>„S <td>” s za pomocą CSS, jak pokazano powyżej.

Najlepszym sposobem, w jaki znalazłem rozwiązanie tego problemu w przeglądarkach webkit, jest umieszczenie elementu div wewnątrz każdego elementu td i zastosowanie podziału strony wewnątrz: unikaj stylu w elemencie div, na przykład:

...
<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>

Mimo że Chrome podobno nie rozpoznaje polecenia „page-break-inside: unikaj”; wydaje się, że zapobiega to dzieleniu zawartości wiersza na pół przez podział strony podczas używania wktohtml do generowania plików PDF. Element tr może nieco wisieć nad stroną zepsutą, ale element div i wszystko w jego wnętrzu nie.

Użyłem sztuczki 4px autorstwa @AaronHill powyżej ( link ) i zadziałała naprawdę dobrze! Użyłem jednak prostszej reguły css bez konieczności dodawania klasy do każdej z nich <td>w tabeli.

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

Znalazłem nowy sposób rozwiązania tego problemu, przynajmniej dla mnie (wersja Chrome 63.0.3239.84 (oficjalna kompilacja) (64-bitowa) na MacOS Sierra)

Dodaj regułę CSS do tabeli nadrzędnej:

table{
    border-collapse:collapse;
}

a dla td:

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

Właściwie znalazłem to rozwiązanie w Stack Overflow, ale nie pojawiło się w początkowych wyszukiwaniach Google: CSS, aby zatrzymać podział strony w wierszu tabeli

Uznanie dla @ Ibrennan208 za rozwiązanie problemu!

Używanie CSS do dzielenia strony nie zadziała (jest to problem z przeglądarką Webkit).

Istnieje hack wkhtmltopdf JavaScript do dzielenia tabel, który automatycznie dzieli długą tabelę na mniejsze tabele w zależności od określonego rozmiaru strony (zamiast dzielenia strony po statycznej wartości x wierszy): https://gist.github.com/3683510

Napisałem następujący JavaScript na podstawie odpowiedzi Aarona Hilla:

//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" />');
    }
});

Gdzie dontSplit to klasa tabeli, w której nie chcesz, aby td dzieliło się na strony. Użyj tego z następującym CSS (ponownie przypisanym Aaronowi Hillowi):

 .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 */
  }

Wygląda na to, że działa dobrze w najnowszej wersji Chrome.

Jedynym sposobem, w jaki udało mi się zadziałać, było umieszczenie każdego elementu TR wewnątrz jego własnego elementu TBODY i zastosowanie reguł podziału strony do elementu TBODY za pośrednictwem css

Spróbuj z

white-space: nowrap; 

style do td, aby uniknąć zrywania nowych linii.

Znalazłem to page-break-inside: avoid to nie zadziała, jeśli którykolwiek z elementów nadrzędnych tabeli to display: inline-blocklub flex. Upewnij się, że wszystkie elementy nadrzędne sądisplay: block .

Weź również pod uwagę nadrzędne table, tr, td„s displaystyle CSS griddla układu wydruku, jeśli trzymać problemy z tabeli.

Rozwiązanie 2020

Jedyną rzeczą, którą mogłem konsekwentnie pracować we wszystkich przeglądarkach, jest umieszczenie każdego wiersza we własnym elemencie tabeli . Działa to również z węzłem HTML-PDF. Następnie ustaw wszystko na page-break-inside: avoid.

table,
tr,
td,
div {
    page-break-inside: avoid;
}

Jedyną wadą jest to, że musisz ręcznie ustawić szerokość kolumn, w przeciwnym razie wygląda to dość dziwnie. Poniższe działały dobrze dla mnie z dwiema kolumnami.

td:first-child { width: 30% }
td:last-child { width: 70% }

Przykład

<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>

To jest stare pytanie, ale ostatnio wpadłem w ten sam błąd. Problem w moim przypadku był związany z table-responsiveklasą Bootstrap , która została przypadkowo użyta na <table>elemencie.

Jeśli więc masz ten sam problem, spróbuj usunąć table-responsivez <table>zajęć podczas wywoływania wkhtmltopdf.