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

              Vorherige template Weiter

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

              Einklappen
              Themen: 56.770   Beiträge: 429.787   Mitglieder: 28.521   Aktive Mitglieder: 52
              Willkommen an unser neuestes Mitglied, web38678.

              Online-Benutzer

              Einklappen

              281 Benutzer sind jetzt online. Registrierte Benutzer: 8, Gäste: 273.

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

              Die neuesten Themen

              Einklappen
              • silent
                Antwort auf Bitte um Hilfe Website
                Guten Tag,
                eventuell könntest du das ganze mithilfe von jQuery sowie mit Cycle lösen. Beides sind Javascripte.
                jQuery ist eine Javascript Bibliothek (kurz erklärt) und diese wird benötigt um das Script Cycle anzusteuern. Mit Cycle könntest du danach deine Slideshow anpassen.
                Ansonsten...
                Heute, 10:16
              • Megabyte
                Antwort auf Dark Mode für die Webseite - wer hat Erfahrungen?
                Hi all...

                Switchen finde ich gut, dann kann der Client nach eigenem Gusto verfahren. Im JavaScript-Kurs haben wir da welche gecodet. War recht simpel wenn man mit JavaScript vertraut ist. Einfach die aufgerufene Funktion mit neuen Style-Anweisungen an die entsprechenden DOM-Knoten aufrufen....
                Heute, 00:59
              • Megabyte
                Antwort auf Bitte um Hilfe Website
                Mein Tipp:

                Erster Tipp:
                Wie daniel5959 schon vermerkte: Selber coden (ist bei dieser Aufgabenstellung nicht soooo schwer...)

                Zweiter Tipp:
                Suche im Netz mal nach JavaScript 'lightbox'. Ist eigentlich ein reiner Pic-Viewer mit Slider-Funktion, man kann da aber bei...
                Heute, 00:35
              • daniel5959
                Antwort auf Bitte um Hilfe Website
                Hallo,

                früher hätte man sich das aus einem einfachen Javascript-Sliderscript, PHP, Datenbank oder PHP-Array und der PHP-Zufallfunktion selber zusammen gebaut, aber wo es sowas heute fertig gibt - keine Ahnung.

                Sowas selber zusammen basteln, dafür habe ich heute weder den...
                Gestern, 20:55
              • Localfu
                Antwort auf Bitte um Hilfe Website
                Ich würde mal behaupten das sowas nicht mit WIX geht. Dafür benötigst du ein Redaktionssystem(Content Managment System - CMS). Damit lässt sich eher sowas realisieren.

                Gruß Localfu
                Gestern, 20:03
              Alle anzeigen

              Die neuesten Beiträge

              Einklappen
              • ct1601
                Bitte um Hilfe Website
                Hi,

                ich würde gerne eine Website erstellen, die folgendes anbieten soll:

                -‚profile‘ (Mehrere Bilder mit Slider, darunter ein Text + kleines Logo fixiert. Keine Benutzerkonten! Die Anordnung sollte bei jeder Aktualisierung zufällig sein.

                – ein Abschnitt,...
                Gestern, 19:30
              • silent
                Antwort auf Bitte um Hilfe Website
                Guten Tag,
                eventuell könntest du das ganze mithilfe von jQuery sowie mit Cycle lösen. Beides sind Javascripte.
                jQuery ist eine Javascript Bibliothek (kurz erklärt) und diese wird benötigt um das Script Cycle anzusteuern. Mit Cycle könntest du danach deine Slideshow anpassen.
                Ansonsten...
                Heute, 10:16
              • admin
                Dark Mode für die Webseite - wer hat Erfahrungen?
                Hallo,

                gestern habe ich zum ersten Mal gesehen, dass Android (und Apple / macOS wohl schon länger) einen Dark-Mode in den Einstellungen anbieten.

                Eine aufgerufene Webseite, die mit hellem Hintergrund designt ist, wird mit schwarzem Hintergrund dargestellt.
                Alles wirkt...
                16.01.2021, 07:07
              • Megabyte
                Antwort auf Dark Mode für die Webseite - wer hat Erfahrungen?
                Hi all...

                Switchen finde ich gut, dann kann der Client nach eigenem Gusto verfahren. Im JavaScript-Kurs haben wir da welche gecodet. War recht simpel wenn man mit JavaScript vertraut ist. Einfach die aufgerufene Funktion mit neuen Style-Anweisungen an die entsprechenden DOM-Knoten aufrufen....
                Heute, 00:59
              • Megabyte
                Antwort auf Bitte um Hilfe Website
                Mein Tipp:

                Erster Tipp:
                Wie daniel5959 schon vermerkte: Selber coden (ist bei dieser Aufgabenstellung nicht soooo schwer...)

                Zweiter Tipp:
                Suche im Netz mal nach JavaScript 'lightbox'. Ist eigentlich ein reiner Pic-Viewer mit Slider-Funktion, man kann da aber bei...
                Heute, 00:35
              • daniel5959
                Antwort auf Bitte um Hilfe Website
                Hallo,

                früher hätte man sich das aus einem einfachen Javascript-Sliderscript, PHP, Datenbank oder PHP-Array und der PHP-Zufallfunktion selber zusammen gebaut, aber wo es sowas heute fertig gibt - keine Ahnung.

                Sowas selber zusammen basteln, dafür habe ich heute weder den...
                Gestern, 20:55
              • Localfu
                Antwort auf Bitte um Hilfe Website
                Ich würde mal behaupten das sowas nicht mit WIX geht. Dafür benötigst du ein Redaktionssystem(Content Managment System - CMS). Damit lässt sich eher sowas realisieren.

                Gruß Localfu
                Gestern, 20:03
              • Mys87
                SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                Hallo zusammen,

                da ein SSL-Zertifikat mittlerweile wohl Standard ist würde ich nun auch gerne eins einsetzen. Bin bei evanzo und da habe ich auch schon die Möglichkeit eines kostenloses Zertifikates über let's encrypt gefunden. Nun soll man ein DNS Eintrag erstellen und da komme ich...
                15.01.2021, 18:13
              • Mys87
                Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                Danke für eure Antworten, ich hab dann heute mal ein Ticket beim evanzo Support geöffnet... ;-)...
                Gestern, 18:04
              • ST747
                Bing BOT webmaster
                Hallo, ich habe für 2 webseiten das webspace-packet einfach getauscht,
                da das eine einen größeren leistungsumfang hat.
                jetzt funktioniert aber der bing-bot nicht mehr.
                ggf. habe ich da auch eine datei vertauscht.
                bei provider ist natürlich auch die ip-adresse für der server...
                Gestern, 15:43
              Alle anzeigen
              Lädt...
              X