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


97

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


1
Désolé, quel est le problème lors de l'utilisation page-break-inside: avoid;?
Christian

2
@ChristianVarga quand j'utilise page-break-inside: éviter avec tr, ça ne marche pas
Ankit Mittal

1
Le saut de page avec les tableaux est assez bogué. Jetez un œil à cette solution de contournement JavaScript code.google.com/p/wkhtmltopdf/issues/detail?id=168#c4
Jona

2
en fait, j'ai essayé page-break-inside:avoidavec tous les éléments de la table comme tr td, mais cela n'a pas fonctionné.
Ankit Mittal

3
Yay Google pour WebGL, javascript rapide aveuglant, client natif portable, mais nous ne pouvons toujours pas imprimer de tableaux de données. Qui aurait besoin de faire ça ??? Seulement à peu près toutes les entreprises du monde. Incidemment, j'ai essayé d'imprimer une feuille de calcul dans Google Docs tout à l'heure, et cela plante systématiquement mon chrome. Je pense que Google Docs imprime via pdf. : /
Sam Watkins

Réponses:


74

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.


18
Malheureusement, cela ne fonctionne pas (encore) avec les navigateurs basés sur des kits Web.
Attila Fulop

2
Oui - il y a quelques bizarreries. Voir la réponse de @ Peter à cette question: stackoverflow.com/questions/7706504/… pour plus d'informations.
Troy Alford

3
Cela ne fonctionne que si vous prenez la table entière, pas seulement tr / td: stackoverflow.com/a/13525758/729324
marcovtwout

1
J'ai rencontré des problèmes avec cela dans IE8, peut-être dans d'autres, où cela oblige la table entière à essayer de tenir sur une page et coupe tout débordement. Il semblait également ignorer l'option «scale to fit» pour ces tableaux.
Tom Pietrosanti

6
@AttilaFulop Toujours? Votre message a 3 ans et je n'arrive toujours pas à le faire fonctionner. Merci
relipse

32

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.


Ça a margin: 4px 0 4px 0;fait l'affaire pour moi, je perdais un record de temps en temps. Merci
Wartodust

Un problème avec cette approche est que parfois seules quelques cellules d'une ligne sont coupées vers la page suivante, bien que chaque cellule seule ne soit pas brisée.
WorldSEnder

@WorldSEnder Oui. Avez-vous trouvé un moyen de contourner ce problème?
ranjansaga

4
Ça ne marche pas. Rien ne fonctionne. J'ai essayé toutes les «solutions» sur Internet et il n'y a pas de solution. Nous devons simplement accepter un logiciel de merde qui ne peut même pas rendre une table.
Niklas R.

18

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

10

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!


son problème résolu de la ligne de table de coupe sa rupture autre conception
aviboy2006

9

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


Ce hack js fonctionnera si je veux juste imprimer une page Web sans wkhtmltopdf?
120196

C'est le seul qui a fonctionné pour moi. Fonctionne également avec la bibliothèque HTML-PDF.
gilbert-v le

8

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

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.


1
Je rend de grands tableaux au format PDF en utilisant wkhtmltopdf, et c'est la seule solution qui a donné des résultats acceptables. Cela pourrait être mieux (Webkit ne répète pas les bordures de cellule après un saut de page), mais au moins le contenu est là. Merci!
Jonathon Hill

7

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


1
Cela fonctionne mieux que le reste pour moi sur Chromium Version 40.0.2214.111 (64 bits) sur Arch Linux. C'est moche et semble piraté - mais apparemment, plusieurs tbodyéléments sont valides dans un table stackoverflow.com/questions/3076708
...

Cela ne fonctionne pas pour moi (Chrome 56.0.2924.87 (64 bits), Mac OS 10.12.2).
Nhat Dinh

4

Essayez avec

white-space: nowrap; 

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


1
Beaucoup plus simple que les autres solutions. Est-ce une nouveauté?
bendecko du

3

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.


3

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>

Pourriez-vous fournir un exemple de tableau HTML? Merci.
PavanBhushan

Merci, @ gilbert-v pour la modification avec l'exemple. J'essaierai ceci.
PavanBhushan il y a
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.