Seitenumbruch nur zwischen tbody beim Drucken von Chrome

Ich habe eine <table> von Daten, bei denen aufeinander folgende Zeilen konzeptionell verwandt sind und zusammenbleiben müssen. Ich habe jedes Paar Zeilen in einem <tbody> Tag gruppieren. Wenn es Zeit wird, die Tabelle zu drucken, möchte ich sicherstellen, dass Seitenumbrüche nur zwischen <tbody> Tags auftreten.Seitenumbruch nur zwischen tbody beim Drucken von Chrome

ich einige Variationen von page-break-inside: avoid und page-break-after: auto versucht haben, aber kann nicht scheinen, um es in Chrome 42 (siehe Screenshot unten)

jedoch zu arbeiten, es macht den Anschein, als zu arbeiten, erwartet in Firefox 40 und IE 11 obwohl. Es sieht so aus, als ob page-break-* nur für Elemente auf Blockebene gilt. Gibt es eine gute Möglichkeit, dies in HTML/CSS zu erreichen?

Beispielcode:

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

Hier ist ein JSFiddle, dass Sie ein wenig eine Vorstellung davon geben werde, was ich zu tun versuchen.

Edit: Ich überlege, keine Tabelle zu verwenden, aber nicht seit (i) möchte ich meine Spalten ausrichten, und (ii) Ich möchte wirklich keine Spaltenbreiten fest, um sicherzustellen, dass sie sind alle gleich.

Quelle

2015-10-23 Jeff Bridgman

Ich bin nicht viel mit Tabellen erfahren noch, aber ich würde empfehlen, einige zu verwenden divs mit display: inline-block und span, da die Tabellen etwas komplex sind ... – Hydro

Tipp: Vermeiden Sie Seitenumbruch-Eigenschaften in Tabellen, Floating-Elementen und Blockelementen mit Rahmen. – Andrew

Probieren Sie es alle in einem Einwickeln machen, dass bestimmte ein Blockelement (http://learnlayout.com/inline-block.html) dann verwenden Seite-Break- *

Quelle

2015-11-22 18:53:44 Gaspo

Welches Element schlagen Sie vor, 'Inline-Block' zu machen? Oder schlagen Sie vor, das Tabellenlayout vollständig aufzugeben? Ich habe es auf '' versucht, aber das führte dazu, dass meine Spalten nicht anreihten (was in meinem Fall eine Voraussetzung ist). –

Seitenumbruch nur zwischen tbody beim Drucken von Chrome

Antwort

Verwandte Themen