Tutorialwelt.de » Tutorials http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm#comments Sat, 17 Oct 2009 04:29:40 +0000 admin http://www.tutorialwelt.de/?p=319 Tutorial habe ich Euch gezeigt, wie man bei Tabellen in HTML den TBody Bereich scrollen kann, während thead und tfoot stehen bleiben. Das funktioniert in allen gängigen Browsern (auch dem Internet Explorer). Mit dieser Methode ist allerdings ein lesbarer Ausdruck der Tabelle nicht möglich. Letztlich wird nur ein Screenshot der Tabelle auf Papier gebracht.... Related posts:
  1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
  3. 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.]]> HTML Tabellen tbody scrollen und korrekt ausdrucken

Im letzten Tutorial habe ich Euch gezeigt, wie man bei Tabellen in HTML den TBody Bereich scrollen kann, während thead und tfoot stehen bleiben. Das funktioniert in allen gängigen Browsern (auch dem Internet Explorer). Mit dieser Methode ist allerdings ein lesbarer Ausdruck der Tabelle nicht möglich.

Letztlich wird nur ein Screenshot der Tabelle auf Papier gebracht. Das Ergebnis sieht folgendermaßen aus:

Screenshot Firefox:

Tbody Tabelle Ausdruck 1 im Firefox

Tbody Tabelle Ausdruck 1 im Firefox

Screenshot Opera:

Tbody Tabelle Ausdruck 1 im Opera

Tbody Tabelle Ausdruck 1 im Opera

Screenshot Internet Explorer:

Tbody Tabelle Ausdruck 1 im Internet Explorer

Tbody Tabelle Ausdruck 1 im Internet Explorer

Das ist nicht unser Ziel. Wir wollen den Besuchern schließlich auch den Ausdruck unserer Informationen ermöglichen. Dieses Tutorial ist eines der umfassendsten zu diesem Thema im Web. Ihr werdet Euch wundern, wie komplex es sein kann, für die drei großen Browser ein annehmbares Ergebnis hinzubekommen. Hierzu werden wir CSS und Javascript einsetzen müssen. Doch dazu später mehr.

Diesmal werden wir den CSS Code in externe Dateien auslagern.
Wir werden eine CSS Datei für die normale Ansicht im Browser erstellen und eine weitere CSS-Datei für den Drucker. Für die Anzeige im Browser verwenden wir wieder die Tabelle aus dem vorangegangenen Tutorial.

Wir nehmen zuerst die Tabelle aus dem vorangegangenen Tabellen-Tutorial als Grundlage.

Wir kopieren den CSS Code und fügen ihn in eine CSS Datei ein:

Beispielcode screen.css:

  #screenoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #screeninnertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #screeninnertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

Diese screen.css binden wir per link rel in unsere HTML-Datei ein. Von @import ist abzuraten (siehe folgendes Tutorial: CSS-Tutorial Einbindung per link rel oder @import)

Beispielcode HTML:

<html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
 </head>
 <body>
  <table id="screenoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="screeninnertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

Ich habe nun absichtlich noch viele weitere Zeilen eingefügt. Wir wollen scrollen… Nicht nur am Monitor, sondern auch beim Ausdruck.

Wir hängen nun folgende Tabelle an die bereits bestehende mit an:

Beispielcode HTML:

<html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
 </head>
 <body>
  <table id="screenoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="screeninnertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>

  <table id="printtab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
    </tr>
    </tbody>
   </table>

  </body>
 </html>

Zu der zweiten Tabelle müssen wir ebenfalls eine CSS erstellen:

Beispielcode print.css:

 #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      width:100%;
      height: 400px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  th+th+th {width:34%;}
  td+td {width:34%;}

In der print.css habe ich nun den Befehl visibility: hidden eingefügt. Dieser Befehl blendet den dazugehörigen Bereich aus. Sobald also die Tabelle ausgedruckt werden soll, wird die print.css geladen und die screenoutertab nicht mehr angezeigt.

Nun sollten wir das gleiche (im umgekehrten Sinn) für die printoutertab in der screen.css machen:

Beispielcode screen.css:

#screenoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #screeninnertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #screeninnertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

  #printoutertab {
      visibility: hidden;
      }

Und diese CSS wieder per link rel einbinden. Ich werde nun die screenouterTab-Tabelle nicht mehr ausführlich im Code anzeigen. Es wird sich an dieser Tabelle nichts mehr im Verlauf des Tutorials ändern. Ebenfalls werde ich den tbody Bereich kürzen. Auch hier wird sich nichts mehr ändern.

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>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
           <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            ........
            ........
            ........
    </tbody>
   </table>

  </body>
 </html>

Nun werden wir die ersten Erfahrungen mit den Eigenarten der unterschiedlichen Browser machen.

Um dieses Tutorial mit möglichst wenig Druckerfarbe und Papier absolvieren zu können, empfehle ich die Druckvoransicht zu wählen oder den PDF Creator zu installieren. Ihr könnt ihn hier herunterladen.
Mit dem PDF-Creator ist es möglich, Internet Seiten als PDF-Datei abzuspeichern. Das Abspeichern als PDF-Dokument wird über das Druckermenü durchgeführt. Man wählt anstelle des Druckers den PDF Creator aus. Das Ergebnis des Druckers gleicht dem des PDF-Creators.

Schaut sich man nun das erste Ergebnis in den verschiedenen Browsern an, wird man schnell feststellen, daß das Ergebnis nicht einmal annähernd zufriedenstellend ist.

Hierzu mal drei Screenshots:

Screenshot Firefox:

Tbody Tabellenausdruck im Firefox

Tbody Tabellenausdruck im Firefox

Soweit sieht das Ergebnis noch in Ordnung aus. Schauen wir uns nun den Übergang von Seite 1 zu Seite 2 an:

Screenshot Firefox:

Tbody-Tabellenausdruck im Firefox Zwischenschritt 1

Tbody-Tabellenausdruck im Firefox Zwischenschritt 1

Hier kann man nun schon den ersten Fehler feststellen: Am Ende der ersten Seite wurde der Tfoot Bereich nicht wiederholt. Im Firefox Browser werden wir dies in den Griff bekommen. Im Opera sowie im Internet Explorer wird dies nicht unser einziges Problem sein.

Schauen wir uns nun die Ergebnisse im Internet Explorer an:

Screenshot Internet Explorer:

Tbody Tabellenausdruck im Internet Explorer

Tbody Tabellenausdruck im Internet Explorer

Auch hier sieht es zu Beginn noch ganz gut aus.

Schauen wir uns nun den Übergang zischen Blatt 1 und Blatt 2 an:

Screenshot Internet Explorer:

Tbody Tabellenausdruck im Internet Explorer

Tbody Tabellenausdruck im Internet Explorer

Auch hier wieder fehlt der Tfoot Bereich auf Seite 1. Doch das ist nicht alles beim Internet Explorer. Auf Seite 2 fehlt der thead Bereich. Und man kann ganz deutlich erkennen, daß der Internet Explorer innerhalb der Zeile den Seitenumbruch gemacht hat. Das ist ein ganz grober unschöner Fehler.

Zuletzt schauen wir uns das Ergebnis in Opera an:

Screenshot Opera:

Tbody Tabellenausdruck in Opera

Tbody Tabellenausdruck in Opera

Als erstes fällt einem Betrachter bei diesem Screenshot auf, daß sich die Tabelle (im Vergleich zu Firefox und Internet Explorer) nicht über die komplette Breite der Seite erstreckt. Die Tabelle ist zusammengestaucht.

Schauen wir uns nun den Übergang von Seite 1 zu Seite 2 im Opera an:

Screenshot Opera:

Tbody Tabellenausdruck im Opera

Tbody Tabellenausdruck im Opera

Im Opera wird es nun ganz schlimm. Auch hier fehlen wieder der tfoot Bereich am Ende von Seite 1 sowie der thead Bereich am Anfang von Seite 2. Doch das ist nicht alles. Opera ist ohne Hilfe nicht in der Lage, das Ende der Tabelle korrekt zu berrechnen (sobald mindestens ein Seitenwechsel vorhanden ist. Das Ende wird dann von Opera einfach mitten in die Tabelle gesetzt.

Bei dieser Fülle von Fehlern in den unterschiedlichen Browsern kann man sich überhaut nicht vorstelle, daß man ein einigermaßen akzeptables Ergebnis erzielen kann. Wir werden es versuchen. Es wird nicht perfekt, aber es wird das beste Ergebnis sein, das man erzielen kann.

Beginnen wir nun mit der Breite der Tabelle in Opera.

Dazu werden wir nun die print.css abändern.

Von der printoutertab löschen wir die Breiten und die Höhenangabe width und height.
Wir löschen ebenfalls die Breitenangabe von th+th+th und td+td.

Dafür fügen wir folgende Breitenangabe ein:
#printoutertab tbody td {width: 400px;}
Hiermit legen wir fest, daß alle td Zellen der printoutertab Tabelle 400 Pixel breit sein sollen.
Eine breite von 400 Pixeln ist für drei Spalten ein optisch sehr gut aussehendes Ergebnis.

Beispielcode print.css:

#printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 400px;}

Und schon haben wir das erste Problem gelöst.

Hier die Screenshots:

Screenshot Opera:

Tabellenausdruck tbody im Opera

Tabellenausdruck tbody im Opera

Der Fehler am Ende der Tabelle besteht allerdings weiterhin:

Screenshot Opera:

tbody Tabelle Ausdruck Seitenwechsel im Opera Browser

tbody Tabelle Ausdruck Seitenwechsel im Opera Browser

Screenshot Firefox:

Tbody Tabellenausdruck im Firefox

Tbody Tabellenausdruck im Firefox

Und der Übergang von Seite 1 zu Seite 2:

Screenshot Firefox:

Ausdruck einer tbody Tabelle im Firefox Seitenwechsel

Ausdruck einer tbody Tabelle im Firefox Seitenwechsel

Zu guter letzt wollen wir uns nochmal das Ergebnis im Internet Explorer ansehen:

Screenshot Internet Explorer:

tbody Tabelle im Internet Explorer ausgedruckt

tbody Tabelle im Internet Explorer ausgedruckt

Und beim Seitenumbruch haben wir das gleiche Problem wie zuvor:
Screenshot Internet Explorer:

tbody Tabelle im Internet Explorer ausgedruckt

tbody Tabelle im Internet Explorer ausgedruckt

Als nächstes nehmen wir uns das falsch berechnete Ende im Opera Browser vor:
Wir fügen folgende Codezeile in unsere print.css ein: tbody tr {display: table-row-group;}
Zur Erklärung: Offiziell heißt es, man könne die bestehenden Probleme mit folgenden drei Zeilen in den Griff bekommen:
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tbody {display: table-row-group;}

Diese display-Befehle fassen die Zellen zu einer Gruppe zusammen. Die Probleme wären angeblich damit beseitigt.
Ich habe sehr lange mit diesen Befehlen herumexperimentiert und kein einziges, alle drei Browser bedienendes Ergebnis erzielen können.

Habe ich allerdings NUR tbody tr {display: table-row-group;} eingefügt, kam ich meinem Wunschergebnis um einiges näher. Allerdings hat sich hier noch ein Opera Bug mit eingeschlichen, den ich Euch gleich zeigen werde.

Demzufolge sieht die print.css nun 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: table-row-group;}

Ihr werdet gleich erschrecken. Nun sieht das Ganze sehr schlimm aus (und dennoch sind wir auf dem richtigen Weg:

Screenshot Opera:

tbody Tabelle mit table-row-group Ausdruck im Opera

tbody Tabelle mit table-row-group Ausdruck im Opera

Screenshot Opera:

tbody Tabelle mit table-row-group Ausdruck beim Seitenumbruch im Opera

tbody Tabelle mit table-row-group Ausdruck beim Seitenumbruch im Opera

Jetzt ist das Ende der Tabelle richtig berechnet. Allerdings sind nun alle Zellen des tbody Bereichs in die erste Spalte gesetzt worden. Die erste Spalte wurde sehr breit und die anderen beiden viel zu schmal.
Schaut Euch mal die erste Zeile der zeiten Seite an. Hier wurde nur der Wert der ersten Zelle ausgegeben. Die beiden anderen Zellen sind leer.

Diesem Problem gehen wir im nächsten Tutorial auf den Grund.

Related posts:

  1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
  3. 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.

]]> http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm/feed 2 Cookies von Iframes im Internet Explorer http://www.tutorialwelt.de/174/cookies-von-iframes-im-internet-explorer.htm http://www.tutorialwelt.de/174/cookies-von-iframes-im-internet-explorer.htm#comments Fri, 28 Aug 2009 13:06:02 +0000 admin http://www.tutorialwelt.de/?p=174
  • WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
  • IT Sicherheit – Internet Explorer und die Aurora Attacke per mshtml.dll Der Internet Explorer und die Aurora Attacke. Das BSI -...
  • Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Cookies von Iframes im Internet Explorer

    Ich bin mal wieder über eine Stolperfalle des Internet Explorer gestolpert. Ich installierte einen AJAX-Chat von Blueimp auf einem Server und sollte diesen dann auf einer anderen Seite per iframe anzeigen lassen.

    Dies ist der Chat: Ajax Chat.

    Beim Test des Chats im Internet Explorer erschien die Meldung, daß Cookies benötigt werden. Cookies waren jedoch angeschaltet.

    Eine Recherche ergab, daß die W3C eine Platform for Privacy Preferences kurz P3P erstellt hat.
    Wer es nachlesen möchte findet den originaltext hier: P3P – Platform for Privacy Preferences
    Hierbei geht es um den Umgang mit Cookies von Drittanbietern. Der Internet Explorer behandelt dies anders als Opera, Firefox und alle anderen. Beim Internet Explorer muss man in jede Datei, die mit Cookies arbeitet folgende Header einfügen:

    Beispielcode PHP:

       header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

    Beispielcode ASP.NET:

       HttpContext.Current.Response.AddHeader("p3p","CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"");

    Beispielcode Django:

       response = render_to_response('mytemplate.html')
response["P3P"] = 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

    Beispielcode Django:

       response.addHeader("P3P","CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"")

    Für den Ajax-Chat von Blueimp galt es nun diesen Header an einer geeignete Stelle einzufügen. Ich habe dazu gleich die index.php genommen und an folgende Stelle im Code eingefügt:

    Beispielcode Blueimp Ajax Chat index.php:

    // Show all errors:
error_reporting(E_ALL);
//header for iframe cookies in Internet Explorer:
header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

// Path to the chat directory:

    Blueimps Ajax Chat lief nun auch innerhalb eines Iframes im Internet Explorer.

    Related posts:

    1. WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
    2. IT Sicherheit – Internet Explorer und die Aurora Attacke per mshtml.dll Der Internet Explorer und die Aurora Attacke. Das BSI -...
    3. Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/174/cookies-von-iframes-im-internet-explorer.htm/feed 0