Adatta una tabella html in formato A4

Question

Ho un file html con una tabella ampia. Voglio essere in grado di metterlo in una dimensione A4. Le colonne che superano la dimensione A4 dovrebbero venire sotto in una nuova tabella.

Ho provato ad utilizzare questo l'attributo @ Page, ma non ha cambiato nulla,

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

C'è qualche libreria di terze parti js che fa automaticamente questo? (La dimensione della tabella non è nota prima della mano, l'utente carica i dati e genera la tabella, quindi il numero di colonne non è fisso). {Il mio obiettivo finale è quello di stampare questo in formato pdf, ma non potrei ottenere ciò usando qprinter dato in QT}

Ho inserito un file html con una lunga tabella qui - link.

Grazie in anticipo

Answer 1

questo sembra fare quello che vuoi, se questo è di collocare le pagine stampate side-by-side e leggere l'intero tavolo perché è sullo schermo. Ha funzionato con il codice html che hai fornito nel tuo link, aggiungere questo al vostro foglio di stile (ho testato solo in Chrome)

@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} 
    } 

La chiave è in rotazione il contenuto per la stampa in modo che trabocca "down" alla pagina successiva, quindi imposta la dimensione in orizzontale per ruotare la carta, così finisci con le pagine orientate verticali da sinistra a destra. Sfortunatamente non sono riuscito a far spezzare la pagina tra le colonne. Ma se si pubblicano tutte le pagine stampate su un muro affiancate, sarà leggibile. L'anteprima di stampa mostrerà tutte le pagine ruotate di 90 gradi, questo è quello che vuoi, quindi seleziona A4 come formato della carta nella finestra di dialogo di stampa. Ho dovuto riposizionare il tavolo e le intestazioni perché era sospeso sul lato sinistro della prima pagina, forse a causa di tutte le div annidate con gli stili in linea ?, non so, come ho detto che funzionava con il tuo html .

Ecco l'stampato in formato pdf (ho ripetuto la prima fila un paio di volte in questo esempio) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0

Answer 2

Tabella non potrebbe rompere le sue colonne in una nuova riga, tutto si può fare è quello di rendere larghezza della tabella in base alla larghezza della carta.

La larghezza della pagina A4 in px è 2480 pixel x 3508 pixel.

in modo da rendere la larghezza massima della tabella a 2480 px in modo che non possa superare il formato della carta.

Proviamo a indovinare la tabella id = "table", quindi il tuo stile dovrebbe essere.

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

Answer 3

Si dovrebbe provare a utilizzare div anziché tabelle se si desidera ottenere buoni fogli stampabili. Con <div> abbiamo un controllo migliore del modo in cui è visualizzato. <div> può essere facilmente nello stile di differenza <table>, <tr>, <td>, ecc

Ecco qualcosa che ho fatto:

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; 
} 

Si può personalizzare lo stesso, se necessario.

Fiddle: div-table-printable

Si può convertire il codice HTML con <table>-<div> utilizzando table-to-divs

Altri riferimenti:

printing-html-table

CSS2PDF