Je veux éviter les sauts de page à l'intérieur de la ligne du tableau en html, lorsque je convertis html en PDF par wkhtmltopdf. J'utilise page-break-inside: éviter avec table- ses travaux, mais j'ai tellement de lignes, alors ne fonctionne pas. Si vous définissez l'affichage de tr comme bloc ou quelque chose d'autre, cela change le formatage du tableau et insère une double bordure. Ou il est possible d'insérer l'en-tête du tableau sur chaque page, là où le tableau a été divisé.

Vous pouvez essayer ceci 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 <tr>directement aux balises, en raison exactement de ce que vous avez souligné ci-dessus - elles ont un displaystyle unique , qui ne permet pas ces règles CSS. Cependant, les balises <td>et <th>qu'elles contiennent autorisent généralement ce type de spécification - et vous pouvez facilement appliquer ces règles à TOUS les enfants <tr>et à <td>l'aide de CSS comme indiqué ci-dessus.

Le meilleur moyen que j'ai trouvé pour résoudre ce problème dans les navigateurs Webkit est de mettre un div à l'intérieur de chaque élément td et d'appliquer le saut de page à l'intérieur: éviter le style 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 soi-disant le "saut de page à l'intérieur: éviter;" propriété, cela semble empêcher le contenu de la ligne d'être divisé en deux par un saut de page lors de l'utilisation de wktohtml pour générer des PDF. L'élément tr peut pendre un peu au-dessus de la page, mais pas le div et tout ce qu'il contient.

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

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

J'ai trouvé un nouveau moyen de résoudre ce problème, du moins pour moi (Chrome Version 63.0.3239.84 (version officielle) (64 bits) sur MacOS Sierra)

Ajoutez une règle CSS à la table 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'apparaît pas dans les recherches Google initiales: CSS pour arrêter le saut de page à l'intérieur de la ligne du tableau

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

L'utilisation du saut de page CSS ne fonctionnera pas (il s'agit d'un problème de navigateur Webkit).

Il existe un hack de fractionnement de table JavaScript wkhtmltopdf qui divise automatiquement une longue table en tables plus petites en fonction de la taille de page que vous spécifiez (plutôt que d'un saut de page après une valeur statique de x lignes): https://gist.github.com/3683510

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 se divisent sur les 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 fonctionner correctement dans la dernière version de Chrome.

La seule façon dont j'ai trouvé de travailler était de placer chaque élément TR dans son propre élément TBODY et d'appliquer les règles de saut de page à l'élément TBODY via css

Essayez avec

white-space: nowrap; 

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

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

Voir également primordial table, tr, tdde » displaystyles avec CSS gridpour la mise en page d'impression si vous continuez à avoir des problèmes avec la table.

La solution 2020

La seule chose que je pourrais toujours faire fonctionner sur tous les navigateurs est de placer chaque ligne dans son propre élément de table . Cela fonctionne également avec le nœud HTML-PDF. Ensuite, réglez tout simplement sur page-break-inside: avoid.

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

Le seul inconvénient est que vous devez définir manuellement la largeur des colonnes, sinon cela semble plutôt étrange. Ce qui suit 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>