éviter le saut de page dans une ligne du tableau

Question

Je veux éviter le saut de page à l'intérieur d'une ligne de tableau en html, lorsque je convertis html en PDF par wkhtmltopdf. J'utilise page-break-inside:avoid avec le tableau - cela fonctionne, mais j'ai tellement de lignes, alors ça ne marche pas. Si l'affichage de tr en tant que bloc ou autre chose, cela change la mise en forme du tableau. et insérer une double bordure. Il est également possible d'insérer l'en-tête du tableau sur chaque page, là où le tableau a été divisé.

Answer 1

Vous pouvez essayer cela avec 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>

La plupart des règles CSS ne s'appliquent pas aux <tr> directement, en raison de ce que vous avez souligné plus haut - ils ont un nom unique. display qui ne tient pas compte de ces règles CSS. Cependant, le style <td> y <th> à l'intérieur de ceux-ci, généralement faire permettent ce genre de spécification - et vous pouvez facilement appliquer de telles règles à TOUS les enfants- <tr> et <td> à l'aide de CSS, comme indiqué ci-dessus.

Answer 2

Le meilleur moyen que j'ai trouvé pour résoudre ce problème dans les navigateurs webkit est de placer un div à l'intérieur de chaque élément td et d'appliquer le style page-break-inside : avoid au div, comme ceci :

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

Même si Chrome ne reconnaît pas la propriété "page-break-inside : avoid ;", cela semble empêcher le contenu de la ligne d'être coupé en deux par un saut de page lorsque vous utilisez wktohtml pour générer des PDF. L'élément tr peut dépasser un peu du saut de page, mais pas le div ni ce qu'il contient.

Answer 3

J'ai utilisé l'astuce des 4px de @AaronHill ci-dessus ( lien ) et cela a très bien fonctionné ! J'ai cependant utilisé une règle css plus simple sans avoir besoin d'ajouter une classe à chaque <td> dans le tableau.

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

Answer 4

J'ai trouvé une nouvelle façon de résoudre ce problème, du moins pour moi (Chrome Version 63.0.3239.84 (Official Build) (64-bit) sur MacOS Sierra)

Ajoutez une règle CSS au tableau parent :

table{
    border-collapse:collapse;
}

et pour le Td :

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

J'ai en fait trouvé cette solution sur Stack Overflow, mais elle n'est pas apparue dans les premières recherches sur Google : CSS pour arrêter le saut de page à l'intérieur d'une ligne de tableau

Bravo à @Ibrennan208 pour avoir résolu le problème !

Answer 5

J'ai constaté que page-break-inside: avoid ne fonctionnera pas si l'un des éléments parents de la table est display: inline-block o flex . Assurez-vous que tous les éléments parents sont display: block .

Pensez également à remplacer table , tr , td 's display styles avec CSS grid pour la mise en page d'impression si vous continuez à avoir des problèmes avec le tableau.