HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2

admin — Sun, 18 Oct 2009 10:00:43 +0000

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:


 
  
  
 
 
  
    ..........
   

  
            ........
            ........
            ........
    
   
    
     Überschrift 1 Überschrift 2 Überschrift 3
      
      
    
   
   
    
     Fußnote 1 Fußnote 2 Fußnote 3
      
      
    
   
   
           
             Zelle 1
             Zelle 2
             Zelle 3

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:


 
  
  
 
 
  
    ..........
   

  
........
........
........

   
    
     
     
     
    
   
   
    
     
     
     
    
   


Zelle 1
Zelle 2
Zelle 3



Zelle 1	Zelle 2	Zelle 3

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.

HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

Tutorialwelt.de » html table

HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2

Fortsetzung Tutorial HTML Tabellen tbody scrollen und korrekt ausdrucken

Fortsetzung Tutorial
HTML Tabellen tbody scrollen und korrekt ausdrucken