Pause de page entre un élément lors de l'impression à partir de Chrome

J'ai un <table> de données où des lignes consécutives sont liées conceptuellement et doivent rester ensemble. J'ai groupé chaque paire de lignes dans un tag <tbody>. Quand vient le temps d'imprimer la table, je veux m'assurer que les sauts de page ne se produisent qu'entre <tbody>.Pause de page entre un élément lors de l'impression à partir de Chrome

J'ai essayé quelques variations de page-break-inside: avoid et page-break-after: auto, mais ne peut pas sembler l'obtenir pour travailler dans Chrome 42 (voir capture d'écran ci-dessous)

Cependant, il ne semble travailler prévu dans Firefox 40 et IE 11 cependant. Il semble que page-break-* ne s'applique qu'aux éléments de niveau bloc. Existe-t-il un bon moyen d'accomplir ceci en html/css?

code Exemple:

<!doctype html> 
<html> 
<head> 
    <style> 
     table { 
      width: 70%; 
      border-collapse: collapse; 
     } 
     thead { 
      display: table-header-group; 
      text-align: left; 
      border-bottom: 2px solid #000; 
     } 
     tbody { 
      page-break-inside: avoid; 
      border-bottom: 1px solid #ccc; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <th>Project #</th> 
       <th>Owner</th> 
       <th>% Complete</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>HR-123</td> 
       <td>Arther Dent</td> 
       <td>42%</td> 
      </tr> 
      <tr> 
       <td colspan='3'>Description: Find travel guide to get me back to earth.</td> 
      </tr> 
     </tbody> 
     <tbody> 
      <tr> 
       <td>RD-123</td> 
       <td>Frodo Baggins</td> 
       <td>9%</td> 
      </tr> 
      <tr> 
       <td colspan='3'>Description: Find a better way to get the ring to Mordor.</td> 
      </tr> 
     </tbody> 
     <!-- repeat tbody sections as necessary to get onto the second page --> 
    </table> 
</body> 
</html>

Voici un JSFiddle qui vous donne un peu une idée de ce que je suis en train d'accomplir. Je considère ne pas utiliser de table mais je n'ai pas voulu (i) que mes colonnes soient alignées, et (ii) je ne veux vraiment pas coder en dur les largeurs de colonnes pour m'assurer qu'elles sommes tous pareils.

Source

2015-10-23 Jeff Bridgman

Je ne suis pas beaucoup plus expérimenté avec des tables, mais je vous recommande d'utiliser quelques-uns divs avec display: inline-block et span car les tables sont un peu complexes ... – Hydro

Conseil: évitez les propriétés de saut de page dans les tables, les éléments flottants et les éléments de bloc avec des bordures. – Andrew

Essayez d'envelopper le tout dans un font qu'un élément de bloc spécifique (http://learnlayout.com/inline-block.html) puis utilisez la page-*

percée

Source

2015-11-22 18:53:44 Gaspo

Quel élément suggérez-vous de faire 'inline-block'? Ou suggérez-vous d'abandonner entièrement la disposition de la table? Je l'ai essayé sur '' mais cela a abouti à ce que mes colonnes ne s'alignent pas (ce qui est une exigence dans mon cas). –

Pause de page entre un élément lors de l'impression à partir de Chrome

Répondre

Questions connexes