Passen Sie eine HTML-Tabelle in A4-Größe

Question

Ich habe eine HTML-Datei mit einer breiten Tabelle. Ich möchte in der Lage sein, es in einer A4-Größe zu setzen. Die Spalten, die die A4-Größe überschreiten, sollten in einer neuen Tabelle aufgeführt werden.

ich dieses das @page Attribut versucht, mit, aber es hat nichts ändern, Gibt es

<style type="text/css"> 
    @page { size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; } 
</style> 

jede Bibliothek js dritte Partei, die dies automatisch tut? (Die Tabellengröße ist vorher nicht bekannt, der Benutzer lädt Daten hoch und erzeugt die Tabelle, so dass die Anzahl der Spalten nicht festgelegt ist). {Mein Endziel ist es, dies als PDF zu drucken, aber das konnte ich nicht mit dem in QT angegebenen qprinter erreichen}

Ich habe hier eine html-Datei mit langer Tabelle - link - gestellt.

Vielen Dank im Voraus

Answer 1

Dies scheint zu tun, was Sie wollen, wenn das den gedruckten Seiten Seite an Seite zu platzieren ist und die gesamte Tabelle zu lesen, wie es auf dem Bildschirm ist. Er arbeitete mit dem html Sie in Ihrem Link versehen, fügen Sie diese zu Ihrem Stylesheet (I nur in Chrome getestet)

@media print{ 
    @page {size:landscape;} 
    html{ 
    -ms-transform: rotate(90deg);/* IE 9 */ 
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */ 
    transform: rotate(90deg); 
    } 

    table,h1,h2 {position:relative;left:4.5cm} 
    } 

Der Schlüssel, den Inhalt für den Druck dreht, so dass es „nach unten“ auf die nächste Seite überläuft, dann Stellen Sie die Größe auf Querformat ein, um das Papier zu drehen, so dass Sie Seiten mit Links/Rechts-Ausrichtung erhalten. Leider konnte ich die Seite nicht dazu bringen, zwischen den Spalten zu wechseln. Aber wenn Sie alle gedruckten Seiten an einer Wand nebeneinander aufstellen, wird es lesbar sein. In der Druckvorschau werden alle um 90 Grad gedrehten Seiten angezeigt. Wählen Sie dann im Druckdialogfeld A4 als Papierformat. Ich musste die Tabelle und Ihre Überschriften neu positionieren, weil es links von der ersten Seite hing, vielleicht wegen all der verschachtelten divs mit Inline-Stilen? Ich weiß nicht, wie ich schon sagte, das funktionierte mit Ihrem HTML .

Hier ist die als PDF-Datei gedruckt wird (ich Ihre erste Reihe ein paar Mal in diesem Beispiel wiederholt) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0

Answer 2

Tabelle konnte nicht seine Spalten in einer neuen Zeile brechen, alles, was Sie tun können, ist Tischbreite machen entsprechend der Papierbreite.

A4 Seitenbreite in px ist 2480 Pixel x 3508 Pixel.

so werden Sie die maximale Breite der Tabelle 2480px machen, so dass es die Größe des Papiers nicht überschreiten konnte.

Lassen Sie uns Ihre Tabelle ID = "Tabelle" erraten, dann sollte Ihr Stil sein.

<style> 
    #table{ 
    max-width: 2480px; 
    width:100%; 
    } 
    #table td{ 
    width: auto; 
    overflow: hidden; 
    word-wrap: break-word; 
    } 
</style> 

Answer 3

Sie sollten versuchen, divs anstelle von Tabellen zu verwenden, wenn Sie gute bedruckbare Blätter erhalten möchten. Mit <div> haben wir bessere Kontrolle über die Art, wie es angezeigt wird.

CSS

@media print { 
    @page { 
     margin: 0; 
    } 
    body { 
     height: 100%; 
     width: 100%; 
    } 
    div.divTableRow > div { 
     display: inline-block; 
     border: solid 1px #ccc; 
     margin: 0.1cm; 
     font-size: 1rem; 
    } 
    div.divTableRow { 
     display: block; 
     margin: solid 2px black; 
     margin: 0.2cm 1cm; 
     font-size: 0; 
     white-space: nowrap; 
    } 
    .divTable { 
     transform: translate(8.5in, -100%) rotate(90deg); 
     transform-origin: bottom left; 
     display: block; 
    } 
} 


.divTable { 
    display: table; 
    width: 100%; 
} 

.divTableRow { 
    display: table-row; 
} 

.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
} 

.divTableCell, 
.divTableHead { 
    border: 1px solid #999999; 
    display: table-cell; 
    padding: 3px 10px; 
    width:100px; // set to a fixed value so as to get the table in the ordered manner. 
} 

.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
    font-weight: bold; 
} 

.divTableFoot { 
    background-color: #EEE; 
    display: table-footer-group; 
    font-weight: bold; 
} 

.divTableBody { 
    display: table-row-group; 
} 

Sie können die gleiche wie nötig anpassen. <div> leicht im Gegensatz zu <table>,

Hier ist etwas, was ich tat <tr>, <td> usw. gestylt werden

Fiddle: div-table-printable

Sie Ihre HTML mit <table>-<div> umwandeln kann table-to-divs

Weitere Referenzen mit:

printing-html-table

CSS2PDF