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.775   Beiträge: 429.816   Mitglieder: 28.526   Aktive Mitglieder: 54
              Willkommen an unser neuestes Mitglied, aschief.

              Online-Benutzer

              Einklappen

              255 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 250.

              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
              • Joschiiie96
                Jimdo - Problem mit Sprungmarke bei Onepager
                Servus Community,

                für das Geschäft eines Freundes habe ich einen kleinen Onepager mithilfe von Jimdo erstellt. Nachdem der Entwurf nun fast fertig ist, haben wir das Pro-Paket von Jimdo gekauft, da es erst damit möglich ist, die Menüpunkte mit individuellen Links zu verknüpfen (und...
                Gestern, 21:24
              • arnego2
                Antwort auf Jimdo - Problem mit Sprungmarke bei Onepager
                auf Jimdo sein Geschäft aufbauen, das ist sicher ein Weg Erfahrungen zu sammeln.

                für €20 pro Monat, 240 pro Jahr bekommt man 2 Jahre VPS, mit Einrichtung plus Webseite, emails und allen drum herum. Eventuell ist da sogar ein Sectico SSL.
                Für die Hälfte, also €120 bekommt man...
                Gestern, 22:26
              • daniel5959
                Antwort auf Jimdo - Problem mit Sprungmarke bei Onepager
                Nachtrag:

                Wenn nur innerhalb der gleichen Seite verlinkt wird, dann genügt als Adresse des Links der betreffende Anker, z.B.

                #sortiment

                Hier habe ich eine Anleitung dazu von Jimdo gefunden, siehe

                >> https://help.jimdo.com/hc/de/articles/1150...
                Gestern, 22:18
              • daniel5959
                Antwort auf Jimdo - Problem mit Sprungmarke bei Onepager
                Hallo,

                im Quelltext taucht bei den Menülinks ein ...

                HTML-Code:
                target="_blank"
                ... auf, also eine Anweisung an den Browser einen neuen Tab aufzumachen.

                Ich arbeite jetzt nicht mit dem Jimdo-Baukasten.

                Irgendwo beim Linksetzen gibt es wohl...
                Gestern, 22:08
              • Arfa
                Videoupload per Link
                Hallo Leute,

                ich bin leider unsicher, in welchem Unterforum ich mit diesem Anliegen am besten aufgehoben bin, aber es geht um Folgendes:

                Für ein Projekt meiner Gemeinde, welches im Sommer 2021 stattfinden wird, sollen uns Anwohner gefilmte Handyvideos der schönsten Plätze...
                Gestern, 12:09
              • arnego2
                Antwort auf Videoupload per Link
                Egal was tu tust, uploadlink mit 3 Schritten, >> https://wetransfer.com/ oder ApK runterladen anmelden und wie man teilt sind ebenfalls 3 Schritte. Um Lehren kommst du nicht vorbei. Es soll ja Leute geben die gerne Lernen.;(...
                Gestern, 16:45
              • Arfa
                Antwort auf Videoupload per Link
                Hallo daniel5959,

                die Pro Version dieser Seite scheint zumindest auf den ersten Blick exakt das zu sein, was ich suche.

                Vielen, vielen Dank!

                Edit:



                Das ist richtig, aber es handelt sich ja nicht um eine Gruppe von Menschen, denen ich...
                Gestern, 15:54
              • arnego2
                Antwort auf Videoupload per Link
                ab 60 gehört man ins Altersheim? Alter ist nur eine Nummer. Wenn du es so einfach machen willst wie möglich zeige ihnen wie man einem Video teilt (shared) Das geht über Telegram, Signal auch ohne Verluste.
                Das schicken sie zu dir und du gibst es weiter zur Schneideabteilung.

                meine...
                Gestern, 15:23
              • daniel5959
                Antwort auf Videoupload per Link
                Hallo,

                ein sehr einfach zu nutzender (wenn man will, auch kostenloser) Anbieter ist z.B.

                >> https://wetransfer.com/

                Einfache Nutzung: Datei oder Ordner auswählen, Empfänger-Mail und eigene Mailadresse angeben - dann auf Senden klicken.

                Der...
                Gestern, 14:53
              • 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...
                17.01.2021, 15:43
              Alle anzeigen
              Lädt...
              X