Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem beim Drucken mit Header und Footer in Landscape

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Problem beim Drucken mit Header und Footer in Landscape

    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:
    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>
    und das zugehörige css:
    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;
}
    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.

    Stichworte: css, head, landscape, print
  • #2
    passiert das nur Sobald du dein CSS auf den Ausdruck Querformat gestellt hast?
    https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

    VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

    Kommentar

    • #3
      Zitat von arnego2 Beitrag anzeigen
      passiert das nur Sobald du dein CSS auf den Ausdruck Querformat gestellt hast?
      Hi,

      ja passiert nur wenn ich die Orientierung auf Querformat setze. Die eingefügten Platzhalter für die zum verschieben der Tabelle können beliebig angepasst werden.
      Leider ändert sich nichts am Ergebnis.

      Debuggen mit Chrome oder in diesem Fall Firefox (besser weil das Druckergebnis eingeblendet werden kann) bringt nicht viel, da der Content immer als eine Seite dargestellt und erst beim Drucken aufgeteilt wird.

      mfg

      coder

      Kommentar

      • #4
        Zitat von coder87 Beitrag anzeigen

        ja passiert nur wenn ich die Orientierung auf Querformat setze.
        na dann setze das einfach nicht das Querformat?

        Du versuchst also etwas zu ändern was durch eine Einstellung in dem css hervorgerufen wird, zu welchen Zweck machst du dir das Leben schwer?
        https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

        VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

        Kommentar

        • #5
          Zitat von arnego2 Beitrag anzeigen

          na dann setze das einfach nicht das Querformat?
          Naja ich will dem User die Möglichkeit geben, in Hoch und Querformat zu drucken. Default sollen die Seiten jedoch im Querformat gedruckt werden, da der Inhalt der Tabellenzellen je nach Eingaben vom Anwender dynamisch lang sein kann.
          Somit kann der Anwender frei wählen ob Hochformat die bessere Variante ist.

          Zitat von arnego2 Beitrag anzeigen
          Du versuchst also etwas zu ändern was durch eine Einstellung in dem css hervorgerufen wird, zu welchen Zweck machst du dir das Leben schwer?
          Im CSS ist die "page" beim Printout auf "landscape".

          mfg

          coder

          Kommentar

          • #6
            Zitat von coder87 Beitrag anzeigen
            Somit kann der Anwender frei wählen ob Hochformat die bessere Variante ist.
            Ok Verstanden,
            Hast du denn schon Besucher?
            https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

            VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

            Kommentar

            • #7
              Zitat von arnego2 Beitrag anzeigen
              Ok Verstanden,
              Hast du denn schon Besucher?
              Ist aktuell noch Offline. Ist jedoch eine Anforderung vom Auftraggeber. Somit hab ich hier wenig Handlungsspielraum.

              Danke

              Kommentar

              • #8
                Hat hier ev. jemand eine Idee wie ich das umsetzen kann? Zusätzlich stehe ich vor dem Problem, dass ich die aktuelle Seite inkl. Gesamtseitenanzahl nicht darstellen kann.

                Bitte um eure Unterstützung da ich mit meinem latein am Ende bin.

                Danke

                Kommentar

                Vorherige template Weiter

                homepage-forum.de - Hilfe für Webmaster! Statistiken

                Einklappen
                Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
                Willkommen an unser neuestes Mitglied, Fohlenfan.

                Online-Benutzer

                Einklappen

                280 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 278.

                Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen
                Alle anzeigen

                Die neuesten Beiträge

                Einklappen
                Alle anzeigen
                Lädt...
                X