é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

L'utilisation de CSS page-break-inside ne fonctionnera pas (c'est un problème du navigateur webkit).

Il existe un hack de division de tableau JavaScript wkhtmltopdf qui divise un long tableau en plus petits tableaux automatiquement en fonction de la taille de la page que vous spécifiez (plutôt que de diviser la page après une valeur statique de x lignes) : https://gist.github.com/3683510

Answer 2

La seule solution que j'ai trouvée pour fonctionner est de placer chaque élément TR à l'intérieur de son propre élément TBODY, et d'appliquer les règles de saut de page à l'élément TBODY via css

Answer 3

J'ai écrit le JavaScript suivant basé sur la réponse d'Aaron Hill :

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

Où dontSplit est la classe de la table où vous ne voulez pas que les td's soient répartis sur plusieurs pages. Utilisez ceci avec le CSS suivant (encore une fois, attribué à Aaron Hill) :

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

Cela semble bien fonctionner dans la dernière version de Chrome.

Answer 4

La solution 2020

La seule chose que j'ai réussi à faire fonctionner de manière cohérente sur tous les navigateurs est de placer chaque ligne dans son propre élément de tableau . Cela fonctionne également avec le nœud HTML-PDF. Ensuite, il suffit de mettre tout à page-break-inside: avoid .

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

Le seul inconvénient de cette méthode est que vous devez définir manuellement la largeur des colonnes, sinon le résultat est plutôt étrange. La méthode suivante a bien fonctionné pour moi avec deux colonnes.

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

---

Exemple

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

Answer 5

Essayez avec

white-space: nowrap; 

à td pour éviter qu'il ne se casse sur de nouvelles lignes.