HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2
Fortsetzung Tutorial
HTML Tabellen tbody scrollen und korrekt ausdrucken
In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme:
Opera hat bei dem Einsatz von table-row-group in der ersten Zeile der zweiten Seite nur der Inhalt der ersten Zelle angezeigt.
Opera und Firefox haben den Inhalt aller drei Spalten in die erste gesetzt.
Um den Fehler des Opera Browsers in der ersten Zeile der zweiten Seite in den Griff zu bekommen, müssen wir
display: table-row-group; mit display:block; ersetzen:
Beispielcode print.css:
#printoutertab {
border: 1px #000000 solid;
position: absolute;
top: 10px;
left: 10px;
}
#screenoutertab {
visibility:hidden;
}
#printoutertab tbody td {width: 220px;}
tbody tr {display: block;}
Und schon ist das Ergebnis besser:
Screenshot Opera:
tbody Tabelle Seitenumbruch im Opera ausgedruckt
Das gleiche Ergebnis liefert uns nun der Firefox Browser:
Screenshot Firefox:
Ausdruck im Firefox mit table-row-group
Screenshot Firefox:
Ausdruck Seitenumbruch im Firefox table-row-group
Diese Stauchung gibt es nun im Internet Explorer nicht:
Screenshot Internet Explorer:
Ausdruck im Internet Explorer mit table-row-group
Screenshot Internet Explorer:
Ausdruck Seitenumbruch im Internet Explorer table-row-group
Der Fehler beim Seitenumbruch besteht allerdings immer noch.
Der Unterschied zwischen Internet Explorer und Opera/Firefox besteht darin, daß die Browser bei der Berechnung der Breite von unterschiedlichen Grundwerten ausgehen. Opera und Firefox setzen die table-row-group in die erste Spalte der Tabelle und verbreitern somit die komplette erste Spalte, während sie die letzten beiden stauchen. Der Internet Explorer würde von der Header Zeile ausgehen und nicht vom Body.
Zu dem Firefox/Opera Problem der Stauchung gibt es eine Lösung. Man fügt eine weitere kleine Tabelle in die erste th Zelle des thead Bereiches ein. In dieser Tabelle sind nun die eigentlichen drei thead Werte vorhanden:
Beispielcode HTML:
<html>
<head>
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">
</head>
<body>
<table id="screenoutertab">
..........
</table>
<table id="printoutertab">
<thead>
<tr>
<th><table><tr><td class="z1">Überschrift 1</td><td class="z1">Überschrift 2</td><td class="z1">Überschrift 3</td></tr></table></th>
<th> </th>
<th> </th>
</tr>
</thead>
<tfoot>
<tr>
<th><table><tr><td class="z1">Fußnote 1</td><td class="z1">Fußnote 2</td><td class="z1">Fußnote 3</td></tr></table></th>
<th> </th>
<th> </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
........
........
........
</tbody>
</table>
</body>
</html>
Ich habe zur einfacheren Zuordnung den Zellen der verschachtelten Tabelle die Klasse z1 zugeordnet.
In der print.css müssen wir noch der Klasse css den Wert font-weight: bold; und width: 220px; zuordnen.
Die print.css sähe dann folgendermaßen aus:
Beispielcode print.css:
#printoutertab {
border: 1px #000000 solid;
position: absolute;
top: 10px;
left: 10px;
}
#screenoutertab {
visibility:hidden;
}
#printoutertab tbody td {width: 220px;}
tbody tr {display: block;}
.z1 {font-weight: bold; width: 220px;}
Nun sieht das Ganze im Firefox folgendermaßen aus:
Screenshot Firefox:
tbody Tabelle im Firefox ausgedruckt
Und der Seitenumbruch sieht auch perfekt aus:
Screenshot Firefox:
tbody Tabelle Seitenumbruch im Firefox ausgedruckt
Jetzt schauen wir uns das Ergebnis im Opera an:
Screenshot Opera:
tbody Tabellen Ausdruck im Opera
Und beim Seitenumbruch:
Screenshot Opera:
tbody Tabellen Ausdruck Seitenumbruch im Opera
Das Tabellenende ist nun korrekt berechnet worden. Die Spalten sind auf die richtige Breite gebracht. Hier passt nun alles.
Doch nun kommt noch einmal der Internet Explorer an die Reihe. Diesmal zickt der IE:
Screenshot Internet Explorer:
tbody Tabelle im Internet Explorer ausgedruckt
Beim Seitenumbruch stimmt das Ganze auch nicht:
Screenshot Internet Explorer:
tbody Tabelle Seitenumbruch im Internet Explorer ausgedruckt
In der vorherigen Version stimmte die Anzeige des Internet Explorers, aber nicht die von Opera und Firefox.
Jetzt ist es umgekehrt. Stehen wir nun vor einem unlösbaren Problem? NEIN!
Wir werden nun eine Abfrage einführen. Wenn der Internet Explorer verwendet wird, soll die verschachtelte Tabelle nicht zum Einsatz kommen.
Zuletzt ist mir noch aufgefallen, daß bei Opera bei thead und tfoot die Einträge nicht zentriert wurden, wie bei den anderen Browsern. Also werden wir in der CSS die z1 Klasse noch um ein text-align: center; erweitern.
Beispielcode print.css:
#printoutertab {
border: 1px #000000 solid;
position: absolute;
top: 10px;
left: 10px;
}
#screenoutertab {
visibility:hidden;
}
#printoutertab tbody td {width: 220px;}
tbody tr {display: block;}
.z1 {font-weight: bold; width: 220px; text-align: center;}
Um den Internet Explorer abzufragen verwenden wir folgendes Javascript:
if (navigator.appName==“Microsoft Internet Explorer“) {
Unsere HTML Datei sähe dann folgendermaßen aus:
Beispielcode HTML:
<html>
<head>
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">
</head>
<body>
<table id="screenoutertab">
..........
</table>
<table id="printoutertab">
<thead>
<tr>
<th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 1")} else {document.write("<table><tr><td class='z1'>Überschrift 1</td><td class='z2'>Überschrift 2</td><td class='z3'>Überschrift 3</td></tr></table>");}</script></th>
<th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 2")} else {document.write(" ");} </script></th>
<th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 3")} else {document.write(" ");} </script></th>
</tr>
</thead>
<tfoot>
<tr>
<th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 1")} else {document.write("<table><tr><td class='z1'>Fußnote 1</td><td class='z2'>Fußnote 2</td><td class='z3'>Fußnote 3</td></tr></table>");}</script></th>
<th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 2")} else {document.write(" ");} </script></th>
<th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 3")} else {document.write(" ");} </script></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
........
........
........
</tbody>
</table>
</body>
</html>
Wir schauen uns nun gemeinsam noch ein allerletztes Mal die Ergebnisse der unterschiedlichen Browser an.
Um es gleich vorweg zu nehmen. Dem Internet Explorer wird man den korrekten Seitenumbruch nicht beibringen können. Auch ein page-break-after bzw. page-break-before ist hier sinnlos. Der Internet Explorer schafft es einfach nicht.
Screenshot Firefox:
tbody Tabelle in Firefox ausgedruckt
Screenshot Firefox:
tbody Tabelle mit Seitenumbruch in Firefox ausgedruckt
Im Opera sieht es nun ebenfalls annehmbar aus:
Screenshot Opera:
tbody Tabellen Ausdruck im Opera Browser
Screenshot Opera:
tbody Tabelle - Seitenwechsel ausgedruckt im Opera
Auch wenn es uns nun nicht gelungen ist, dem Opera Browser es beizubringen, daß thead und tfoot auf jeder Seite wiederholt werden sollten, haben wir ein ansehnliches Ergebnis erreicht. Das Ende der Tabelle wir nun auch richtig berechnet und nicht mitten in die Tabelle gesetzt.
Abschließend betrachten wir noch das Ergebnis im Internet Explorer. Hier ist leider nichts mehr zu machen.
Der Fehler beim Seitenübergang ist nicht in den Griff zu bekommen. Angeblich soll Microsoft einen Patch für den Internet Explorer haben. Gefunden habe ich dazu allerdings leider nichts.
Screenshot Internet Explorer:
tbody Tabelle im Internet Explorer ausgedruckt
Screenshot Internet Explorer:
tbody Tabelle Seitenwechsel im Internet Explorer ausgedruckt
Für dieses Tutorial sind so manche Kopfhaare ergraut. Ich glaube hier kann man überdeutlich sehen, wie komplex Internet Seiten Entwicklung sein kann, da es manchmal kein Patentrezept gibt und einem die Entwickler der Browser auch die eine oder andere Stolperfalle vor die Füsse werfen. Schade eigentlich. Es soll doch ein einheitlicher Standard geschaffen werden?! Davon sind wir noch meilenweit entfernt. Inzwischen startet CSS mit der dritten Generation. Befehle a la page-break-after sollten seit CSS 2.1 Standard sein. Obwohl man die aktuellsten Broser verwendet, kommt man bei so simplen Dingen wie dem Ausdrucken einer Tabelle ins straucheln.
Trotz allem sind wir mit dem Entwickeln von Tabellen noch nicht fertig. Hierzu werden noch ein paar Tutorials folgen.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
