web-dev-qa-db-fra.com

éviter les sauts de page à l'intérieur de la ligne du tableau

Je veux éviter les sauts de page à l'intérieur des lignes du tableau en HTML, lorsque je convertis le HTML en PDF par wkhtmltopdf. J'utilise saut de page à l'intérieur: évite les travaux avec les tableaux, mais je beaucoup de lignes, alors ne fonctionne pas. Si définir l'affichage de tr comme bloc ou quelque chose d'autre alors il modifie la mise en forme du tablea et insérer une double bordure. Ou il est possible d'insérer l'en-tête du tableau sur chaque page, où la table a été divisée.

htmlcsswkhtmltopdf
85
Ankit Mittal

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> balises directement, en raison de ce que vous avez souligné précédemment - elles ont un style unique display qui ne permet pas ces règles CSS. Cependant, le <td> et <th> Les balises qu’ils contiennent sont généralement autorisées par ce type de spécification et vous pouvez facilement appliquer ces règles à ALL enfant -<tr>'le sable <td> utilise CSS comme indiqué ci-dessus.

67
Troy Alford

La meilleure façon que j'ai trouvée de traiter ce problème dans les navigateurs web est de mettre une div à l'intérieur de chaque élément td et d'appliquer le saut de page à l'intérieur: éviter le style à la 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 apparemment pas la propriété 'page-inside-inside: Avoid;', cela semble empêcher le contenu de la ligne d'être scindé en deux par un saut de page lors de l'utilisation de wktohtml pour générer PDF: L’élément tr peut s’accrocher un peu à la coupure de page, mais pas la div ni rien de ce qui est à l’intérieur.

30
Aaron Hill

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 à chaque <td> dans la table.

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

J'ai trouvé un nouveau moyen de résoudre ce problème, du moins pour moi (Version Chrome 63.0.3239.84 (Build officiel) (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 effectivement trouvé cette solution sur Stack Overflow, mais elle ne figurait pas dans les recherches initiales sur Google: CSS pour arrêter le saut de page à l'intérieur de la ligne du tablea

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

9
Jason Silver

J'ai écrit le code 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 dans laquelle vous ne souhaitez pas que les td soient divisés 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 fonctionner correctement dans la dernière version de Chrome.

8
Aaron Newton

L'utilisation de CSS Page-break-inside ne fonctionnera pas (il s'agit d'un problème lié au navigateur Webkit).

Il existe une table wkhtmltopdf JavaScript qui divise un hack et scinde automatiquement un tableau long en tableaux plus petits en fonction de la taille de la page spécifiée (plutôt que le saut de page après une valeur statique de x lignes): https: //Gist.github. com/368351

7
Richard Pursehouse

La seule façon dont j'ai trouvé le travail é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

7
Troy Morehouse

Essayer avec

white-space: nowrap;

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

3
vinayakshukre