Hallo zusammen,
ich habe mir eine Webseite (Protokoll) erstellt, welche Daten in Form einer Tabelle darstellt.
Damit ich diese Daten entsprechend in Papierform (oder als PDF) zur Verfügung stellen kann, gibt es die Möglichkeit die Seite zu drucken.
Zur Formatierung habe ich einen wiederholenden Header und Footer bei mehreren Seiten eingefügt.
Dies funktioniert ohne Probleme wenn die Orientierung der Seite auf Hochformat gestellt ist.
Sobald ich über mein CSS den Ausdruck auf Querformat stelle, kommt es ab der 2. Seite zu einer Überlappung der Tabelle und des Headers.
Bei Chrome und FF ist das verhalten ident.
Anbei mein HTML Code:
und das zugehörige css:
Das Ergebnis sieht dann so aus:
Ergebnis Hochformat.jpgErgebnis Querformat.jpg
Ich finde momentan keine Lösung wie ich es im Querformat hinbekomme.
Am besten wären natürlich beide Formate, da die Druckereinstellungen beim Drucken abgeändert werden können.
ich habe mir eine Webseite (Protokoll) erstellt, welche Daten in Form einer Tabelle darstellt.
Damit ich diese Daten entsprechend in Papierform (oder als PDF) zur Verfügung stellen kann, gibt es die Möglichkeit die Seite zu drucken.
Zur Formatierung habe ich einen wiederholenden Header und Footer bei mehreren Seiten eingefügt.
Dies funktioniert ohne Probleme wenn die Orientierung der Seite auf Hochformat gestellt ist.
Sobald ich über mein CSS den Ausdruck auf Querformat stelle, kommt es ab der 2. Seite zu einer Überlappung der Tabelle und des Headers.
Bei Chrome und FF ist das verhalten ident.
Anbei mein HTML Code:
HTML-Code:
<html> <head> <link rel="stylesheet" type="text/css" href="reportstyle.css"> <script type="text/javascript"> function printWindow() { document.getElementById('footer_vis').style.visibi lity = 'visible'; window.print(); document.getElementById('footer_vis').style.visibi lity = 'hidden'; } </script> </head> <body> <!-- Body of Html Page --> <div class="page-header" style="text-align: center"> <div class="logo-container"> <div class="column"> <!--- PrintButton --> <button class="print-button" onclick="printWindow();"></button> </div> <div class="column"> <img class="logo" src="logo1.jpg" alt="logo" > </div> <div class="column"> <table align="right"> <tbody> <tr> <!-- Comments--> <td >Infos </td> </tr> <tr> <td >Infos </td> </tr> </tbody> </table> </div> </div> <div class="clr"></div> <div class="reporttitle"> <h1> Das ist mein Bericht</h1> <h2> und soll im Querformat gedruckt werden</h2> </div> <div class="clr"></div> <table class="batch-info"> <td class="td-content"> <table class="batch-content"> <tr> <td>Bezeichnung</td><td class="td-value">Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> </tr> <tr> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> </tr> <tr> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> <td>Bezeichnung</td><td class="td-value"> Daten</td> </tr> </table> </td> </table> </div> <div class="page-footer" id="footer_vis" style="text-align: center;"> <table style="width:100%"> <tr> <td>Bezeichnung</td> <td>Bezeichnung</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td>Bezeichnung</td> <td> </td> </tr> </table> </div> <content> <!-- main content of report --> <table class="main-table"> <thead> <tr> <td class="header-td"> <!--place holder for the fixed-position header--> <div class="page-header-space"></div> </td> </tr> <tr> <th>Spalte 1</th> <th>Spalte 2</th> <th>Spalte 3</th> <th>Spalte 4</th> <th>Spalte 5</th> <th>Spalte 6</th> <th>Spalte 7</th> <th>Spalte 8</th> </thead> <tbody> <tr> <td> 1 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 2 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 3 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 4 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 5 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 6 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 7 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 8 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 9 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 10 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 11 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 12 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 13 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 14 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 15 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 16 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 17 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 18 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 19 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 20 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 21 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 22 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 23 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 24 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 25 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 26 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 27 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 28 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 29 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 30 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 1 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 2 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 3 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 4 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 5 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 6 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 7 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 8 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 9 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 10 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 11 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 12 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 13 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 14 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 15 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 16 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 17 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 18 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 19 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 20 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 21 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 22 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 23 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 24 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 25 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 26 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 27 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 28 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 29 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 30 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 1 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 2 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 3 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 4 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 5 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 6 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 7 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 8 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 9 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 10 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 11 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 12 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 13 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 14 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 15 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 16 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 17 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 18 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 19 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 20 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 21 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 22 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 23 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 24 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 25 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 26 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 27 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 28 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 29 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> <tr> <td> 30 </td> <td>Inhalt</td> <td>Inhalt1</td> <td>100</td> <td>Inhalt2</td> <td id="ackTxt" class="wrap">Langer Inhalt</td> <td>Inhalt3</td> <td>Inhalt4</td> </tr> </tbody> <tfoot> <tr> <td class="footer-td"> <!--place holder for the fixed-position footer--> <div class="page-footer-space"></div> </td> </tr> </tfoot> </table> </div> </content> </body> </html>
Code:
/* Styles go here */ .page-header, .page-header-space { height: 290px; } .page-footer, .page-footer-space { height: 60px; visibility: hidden; } .page-footer { position: fixed; bottom: 0; width: 100%; border-top: 0px solid black; /* for demo */ background: white; /* for demo */ } .page-header { position: fixed; top: 0mm; width: 100%; border-bottom: 0px solid black; /* for demo */ background: white; /* for demo */ font-size: 9px; color: #f00; text-align: center; overflow: hidden; box-sizing: border-box } .page { page-break-after: always; } @page { margin: 0mm 2mm 4mm 0mm; } @media print { thead {display: table-header-group;} tfoot {display: table-footer-group;} /* predefine header for printing*/ .page-header, .page-header-space {height: 250px;} button {display: none;} body {margin: 0;} @page {size: A4 landscape;} } body { font-family: Gotham, Helvetica, sans-serif; margin-left: 10px; margin-right:10px; padding: 0; background-color: #white; font: 11pt "Tahoma"; } .logo{ height: 100px; width:100%; margin:0px; } .clr{ clear:both; } .logo-container{ width:auto; margin: auto; text-align:center; } .column{ float:left; width:33%; text-align: center; border:none; padding:10px; box-sizing:border-box; margin-left:none; } .column td{ border: 1px solid #999; padding: 1px; margin-right: 50px; text-align:right; } .reporttitle { background-color: #ffffff; text-align: center; } .main-table { border-collapse: collapse; width:100%; border: 0px solid black; text-align: center; } .main-table td, th { border: 1px solid black; width:1%; font-family: Gotham, Helvetica, sans-serif; font: 10pt "Tahoma"; background-color: white; /* for demo */ } .main-table td.wrap { min-width: 1px; max-width: 10px; } .main-table td.footer-td { visibility: hidden; border: none; } .main-table td.header-td { visibility: hidden; border: none; } h1, h2 { margin: 5px; } h2{ color: Black; text-align: center; } .print-button{ text-align:center; width: 55px; height: 55px; } .footer-Content { padding: 10px; text-align: left; background: #ffffff; margin-top: 10px; } .batch-info { border: none; width: 100%; } .batch-info td { border: 1px solid black; width: auto; } .batch-info .td-content { border:none; } .batch-info .batch-content { font-family: Gotham, Helvetica, sans-serif; font: 10pt "Tahoma"; margin-left: auto; margin-right: auto; } .batch-info .td-value { padding-right: 10px; }
Ergebnis Hochformat.jpgErgebnis Querformat.jpg
Ich finde momentan keine Lösung wie ich es im Querformat hinbekomme.
Am besten wären natürlich beide Formate, da die Druckereinstellungen beim Drucken abgeändert werden können.
Kommentar