Kugelsichere Lösung für den Seitenumbruch in der Tabellenzeile (tr) zum Drucken

Es ist Tage nach Tagen gewesen, dass wir es versäumt haben, Tische nach unseren Bedürfnissen zu brechen. Die Lösung funktioniert für Firefox, hat aber nie besser für meinen Lieblingsbrowser Chrome funktioniert. Was wir bisher versucht haben ist:

Wir haben eine Klasse .page-break erstellt und notwendige CSS für die verschiedenen Level-Inhaber gemacht:

Wir haben bis jetzt gelernt / gefunden

• Seitenumbruch funktioniert mit einem Block-Level-Element wie <h1> <p> etc.
• Seitenumbruch funktioniert in Google Chrome für Tabellen-CSS
fehlerhaft

Wenn wir sie im Hinterkopf behalten, haben wir verschiedene Wege eingeschlagen:

Schritt # 1: Versuchen Sie die Lösung mit <table> <tr>

Aber das hat in Google Chrome nicht funktioniert. Obwohl wir erfahren haben, <tr> selbst ist ein Block-Level-Element .

Schritt 2: Tabelle absolut <div> basierend auf

Aber das hat in Google Chrome nicht funktioniert.

Schritt 3: Eingabe des Block Level Elements innerhalb der Tabellenzelle

Unter Anweisung des SO-Threads haben wir ein Block-Level-Element in einer leeren Tabellenzelle wie folgt ausprobiert:

Es funktioniert teilweise, nur für die erste Seite. Wir haben versucht, den unbeholfenen Text Block mit Bootstrap .sr-only klasse zu verstecken, aber damit funktioniert es überhaupt nicht. Wir haben versucht, den "Next Section" mit   zu ersetzen - es funktioniert auch nicht.

Schritt 4: Platzieren eines <div> , um mit bekannten Block-Level-Elementen zu brechen

Aber Sie wissen, dass es nicht funktioniert, weil <div> in einer Tabelle nur innerhalb einer Tabellenzelle funktioniert:

  

Was Sie tun müssen, ist sicherzustellen, dass das div sich in einer tatsächlichen Tabellenzelle, einem td oder th Element befindet.
- Chris Coyier

Nachmahd

Wir sind gescheitert unsere Tabelle in Google Chrome gut zu knacken. : (