0
220
ViewsImpresión de tablas dinámicas: cómo hacerlo lo mejor posible
Estoy generando dinámicamente la tabla N columnas x M filas
y estoy tratando de hacer que se imprima con las opciones de impresión predeterminadas lo mejor posible
Entonces,
Cada vez que imprimamos la tabla en papel A1/A2/A3/A4, entonces la tabla debe INTENTAR ocupar una hoja de papel completa, su espacio disponible con la fuente más grande posible (las personas que lo leerán pueden no tener una vista perfecta)
Pero cuando voy a, por ejemplo, Microsoft Edge (tiene herramientas para manipular la escala, los márgenes y demás, por eso lo usé, lo que también me preocupa un poco, que los resultados de impresión en Chrome/FF/Edge pueden variar)
y use la vista previa (CTRL+P), entonces siempre ocupa más de una página o usa solo, por ejemplo, el 40% del espacio disponible
Papel A4, sin márgenes:
fit to the printing area :
real size :
Parte del código:
<!DOCTYPE html> <html lang="pl-PL"> <head> <title>Plan zajęć</title> <style> .printable-tables { white-space: nowrap; } .printable-tables > table { display: inline-table; } @page { size: landscape; } .printable-tables > table { page-break-before: always; page-break-after: always; } .header_low_height { } * { } table, th, td { border: 1px solid black; padding-left: 5px; padding-right: 5px; } tr td { border-right-style: solid; border-right-width: 1pt; border-bottom-style: solid; border-bottom-width: 1pt; padding-right: 5.4pt; padding-left: 5.65pt; text-align: center } .vert { writing-mode: vertical-lr; } th { } .td_low_height { } .dayName { padding: 8px; text-align: center; font-weight: bold; } .rotate { transform: translateX(-30%) rotate(0.5turn); } .top_border { border-top: 3px solid black } </style> </head> <body> <table style="border: 1pt solid #000000; border-collapse:collapse"> <tr class="header_low_height"> <th rowspan="2" style=""> <p><span>Kolejność godzin lekcyjnych</span></p> </th> <th colspan="31" style=""> <p><span>Nauczyciele <br> (przydział godzin lekcyjnych w klasach)</span></p> </th> </tr> <tr class="header_low_height"> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> </tr> <tr> <td>1. 07:55:00 - 08:40:00</td> <td>-</td> <td>OPa</td> <td>IV</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>VIIB</td> <td>VIII</td> <td>-</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>0</td> <td>IB</td> <td>-</td> <td>OPb</td> <td>II</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> </tr> <tr> <td>2. 08:50:00 - 09:35:00</td> <td>-</td> <td>OPa</td> <td>V</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>IV</td> <td>VIII</td> <td>-</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>0</td> <td>II</td> <td>-</td> <td>OPb</td> <td>IB</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> </tr> <tr> <td>3. 09:45:00 - 10:30:00</td> <td>-</td> <td>OPa</td> <td>VIIB</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VI</td> <td>0</td> <td>IA</td> <td>-</td> <td>OPb</td> <td>-</td> <td>IB</td> <td>-</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>IV</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> </tr> <tr> <td>4. 10:40:00 - 11:25:00</td> <td>-</td> <td>OPa</td> <td>VIII</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VIIB</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IA</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>IV</td> <td>-</td> <td>-</td> <td>VIIA</td> </tr> </table> </body> </html>Aquí está el código completo (debido al límite de caracteres):
https://pastebin.com/raw/36UuuPZy
¿Cómo imprimir tablas enormes, verdad? :O
·
Santiago Trujillo
3 answers
Answer question0
Revisé su código, trabajé un poco en él y conseguí que funcionara... Espero que sea de su agrado. Reduje los caracteres en el código a continuación para cumplir con el límite de 30,000 caracteres de StackOverflow. Para obtener el código completo, vaya a Fit-To-Print-Area: GitHub Gist . Puede encontrar capturas de pantalla a continuación del resultado.
<!DOCTYPE html> <html lang="pl-PL"> <head> <title>Plan zajęć</title> <!-- 32 cols--> <style> @page { size: landscape; } body { font-size: 10pt; font-family: Garamond, Serif; } table { border-collapse: collapse; border-spacing: 0; font-size: 1.2em; } td, th { padding: 0; border: 1px solid #000000; } tr.tableTitle { font-size: 1.2em; font-weight: bold; text-align:center; background: #d0d0d0; } thead tr { font-weight: bold; background: #f0f0f0; text-align:center; } @media print { table{ font-size:1vw; } } </style> </head> <body> <table> <tr class="header_low_height"> <th rowspan="2"> <p><span>Kolejność godzin lekcyjnych</span></p> </th> <th colspan="31"> <p><span>Nauczyciele <br> (przydział godzin lekcyjnych w klasach)</span></p> </th> </tr> <tr class="header_low_height"> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> </tr> <tr> <td>1. 07:55:00 - 08:40:00</td> <td>-</td> <td>OPa</td> <td>IV</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>VIIB</td> <td>VIII</td> <td>-</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>0</td> <td>IB</td> <td>-</td> <td>OPb</td> <td>II</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> </tr> <tr> <td>2. 08:50:00 - 09:35:00</td> <td>-</td> <td>OPa</td> <td>V</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>IV</td> <td>VIII</td> <td>-</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>0</td> <td>II</td> <td>-</td> <td>OPb</td> <td>IB</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> </tr> <tr> <td>3. 09:45:00 - 10:30:00</td> <td>-</td> <td>OPa</td> <td>VIIB</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VI</td> <td>0</td> <td>IA</td> <td>-</td> <td>OPb</td> <td>-</td> <td>IB</td> <td>-</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>IV</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> </tr> <tr> <td>4. 10:40:00 - 11:25:00</td> <td>-</td> <td>OPa</td> <td>VIII</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VIIB</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IA</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>IV</td> <td>-</td> <td>-</td> <td>VIIA</td> </tr> <tr> <td>5. 11:45:00 - 12:30:00</td> <td>-</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>IV</td> <td>VIII</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>0;OPa</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>VI</td> <td>-</td> <td>VIIB</td> </tr> <tr> <td>6. 12:45:00 - 13:30:00</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>-</td> <td>IV</td> <td>-</td> <td>VIII</td> <td>-</td> <td>OPb</td> <td>-</td> <td>-</td> <td>OPa;0</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> <td>ŚWIETLICA</td> <td>-</td> <td>VIIB</td> </tr> <tr> <td>7. 13:45:00 - 14:30:00</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>VI</td> <td>V</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>ŚWIETLICA</td> <td>-</td> <td>VIII</td> </tr> <tr> <td>8. 14:40:00 - 15:25:00</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>ŚWIETLICA</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>VIIA</td> <td>-</td> <td>-</td> </tr> <tr> <td>1. 07:55:00 - 08:40:00</td> <td>-</td> <td>OPa</td> <td>VIIB</td> <td>-</td> <td>IIIB</td> <td>IV</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>-</td> <td>0</td> <td>-</td> <td>V</td> <td>OPb</td> <td>IA</td> <td>IB</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>2. 08:50:00 - 09:35:00</td> <td>-</td> <td>OPa</td> <td>IV</td> <td>-</td> <td>IIIB</td> <td>V</td> <td>IA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>II</td> <td>-</td> <td>-</td> <td>0</td> <td>IIIA</td> <td>VIIA</td> <td>OPb</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>3. 09:45:00 - 10:30:00</td> <td>-</td> <td>OPa</td> <td>V</td> <td>-</td> <td>IIIB</td> <td>VI</td> <td>IA</td> <td>-</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>IV</td> <td>0</td> <td>-</td> <td>VIIB</td> <td>OPb</td> <td>II</td> <td>IB</td> <td>-</td> <td>-</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>4. 10:40:00 - 11:25:00</td> <td>-</td> <td>OPa</td> <td>VIII</td> <td>-</td> <td>IIIB</td> <td>VIIA</td> <td>IA</td> <td>-</td> <td>-</td> <td>ŚWIETLICA</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VI</td> <td>0</td> <td>-</td> <td>IV</td> <td>OPb</td> <td>-</td> <td>IB</td> <td>-</td> <td>-</td> <td>V</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>5. 11:45:00 - 12:30:00</td> <td>-</td> <td>OPa</td> <td>-</td> <td>V</td> <td>IIIB</td> <td>VIIB</td> <td>IA</td> <td>-</td> <td>VIII</td> <td>ŚWIETLICA</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VIIA</td> <td>0</td> <td>-</td> <td>IV</td> <td>OPb</td> <td>-</td> <td>IB</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>6. 12:45:00 - 13:30:00</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>IIIB</td> <td>VIII</td> <td>-</td> <td>VIIA</td> <td>V</td> <td>ŚWIETLICA</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>IB</td> <td>-</td> <td>-</td> <td>IV</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> </tr> <tr> <td>7. 13:45:00 - 14:30:00</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>IV</td> <td>-</td> <td>-</td> <td>-</td> <td>ŚWIETLICA</td> <td>V</td> <td>IV</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> </tr> <tr> <td>8. 14:40:00 - 15:25:00</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA;VIIB</td> <td>VI</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> </tr> <tr> <td>1. 07:55:00 - 08:40:00</td> <td>-</td> <td>OPa</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>IA</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>-</td> <td>0</td> <td>IIIB</td> <td>-</td> <td>OPb</td> <td>V</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>IV</td> <td>VI</td> <td>-</td> <td>VIIA</td> </tr> <tr> <td>2. 08:50:00 - 09:35:00</td> <td>-</td> <td>OPa</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>IA</td> <td>IV</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VI</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IIIB</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>V</td> <td>-</td> <td>VIIA</td> </tr> <tr> <td>3. 09:45:00 - 10:30:00</td> <td>-</td> <td>OPa</td> <td>IV</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>VIII</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>-</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>VI</td> <td>-</td> <td>VIIB</td> </tr> <tr> <td>4. 10:40:00 - 11:25:00</td> <td>-</td> <td>OPa</td> <td>-</td> <td>V</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>-</td> <td>VIII</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>IV</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>-</td> <td>IB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>VI</td> <td>-</td> <td>VIIB</td> </tr> <tr> <td>5. 11:45:00 - 12:30:00</td> <td>-</td> <td>OPa</td> <td>VIIA</td> <td>-</td> <td>IIIB</td> <td>-</td> <td>IA</td> <td>VI</td> <td>V</td> <td>VIIB</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> <td>-</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IV</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>II</td> <td>-</td> <td>VIII</td> </tr> <tr> <td>6. 12:45:00 - 13:30:00</td> <td>-</td> <td>-</td> <td>V</td> <td>IV</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>ŚWIETLICA</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>VIII</td> </tr> <tr> <td>7. 13:45:00 - 14:30:00</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>IIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> </tr> <tr> <td>8. 14:40:00 - 15:25:00</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>-</td> <td>ŚWIETLICA</td> <td>VIIB</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>-</td> <td>-</td> </tr> <tr> <td>1. 07:55:00 - 08:40:00</td> <td>-</td> <td>OPa</td> <td>-</td> <td>-</td> <td>IIIB</td> <td>IV</td> <td>IA</td> <td>-</td> <td>V</td> <td>-</td> <td>IIIA</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>0</td> <td>II</td> <td>-</td> <td>OPb</td> <td>VI</td> <td>IB</td> <td>-</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VIII</td> <td>ŚWIETLICA</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>2. 08:55:00 - 09:35:00</td> <td>-</td> <td>OPa</td> <td>-</td> <td>-</td> <td>IIIB</td> <td>VIIA</td> <td>IA</td> <td>-</td> <td>-</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>-</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IV</td> <td>IB</td> <td>-</td> <td>VIIB</td> <td>VIII</td> <td>-</td> <td>-</td> <td>-</td> <td>V</td> <td>VI</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>3. 09:45:00 - 10:30:00</td> <td>-</td> <td>OPa</td> <td>-</td> <td>-</td> <td>-</td> <td>VIIB</td> <td>IA</td> <td>-</td> <td>V</td> <td>-</td> <td>IIIA</td> <td>II</td> <td>-</td> <td>IV</td> <td>0</td> <td>-</td> <td>-</td> <td>OPb</td> <td>IIIB</td> <td>IB</td> <td>-</td> <td>VIII</td> <td>VIIA</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>VI</td> <td>-</td> <td>-</td> </tr> </table> </body> </html>
·
Santiago Trujillo
Report
0
Agregué un método de JavaScript FitFontSize para crear diferentes diseños para diferentes tamaños de impresión. intentará reducir el tamaño de fuente automáticamente cuando la tabla exceda una página y mantendrá el tamaño de fuente predeterminado si la tabla se ajusta a la altura del papel de impresión.
let papers = [ {name:'a1', width:'84cm', height:'58cm', fontSize:20}, {name:'a2', width:'59cm', height:'41cm', fontSize:18}, {name:'a3', width:'42cm', height:'28cm', fontSize:16}, {name:'a4', width:'27cm', height:'16cm', fontSize:14} ]; // the fontSize is the default font size for diffrent paper size FitFontSize('t', papers);aquí está el código completo y una demostración en vivo
<!DOCTYPE html> <html lang="pl-PL"> <head> <title>Plan zajęć</title> <style> table { table-layout:fixed; width:100%; height:100%; } @media screen { .sp-container { position:absolute; left:-99999px; top:-99999px; } } .sp-container-a4 .dayName { padding:0; } @media print { @page { size: landscape; padding: 0; margin:0.5em; } html, body {padding:0; margin:0; height:100vh; overflow:hidden;} .sp-container {display:none;} .sp-hide-on-print {display:none;} } @media print and (min-width: 10cm) { .sp-container-a1 {display:none;} .sp-container-a2 {display:none;} .sp-container-a3 {display:none;} .sp-container-a4 {display:block;} } @media print and (min-width: 30cm) { .sp-container-a1 {display:none;} .sp-container-a2 {display:none;} .sp-container-a3 {display:block;} .sp-container-a4 {display:none;} } @media print and (min-width: 50cm) { .sp-container-a1 {display:none;} .sp-container-a2 {display:block;} .sp-container-a3 {display:none;} .sp-container-a4 {display:none;} } @media print and (min-width: 80cm) { .sp-container-a1 {display:block;} .sp-container-a2 {display:none;} .sp-container-a3 {display:none;} .sp-container-a4 {display:none;} } table, th, td { border: 1px solid black; /*padding-left: 5px; padding-right: 5px;*/ } tr td { border-right-style: solid; border-right-width: 1pt; border-bottom-style: solid; border-bottom-width: 1pt; /*padding-right: 5.4pt; padding-left: 5.65pt;*/ text-align: center } .vert { writing-mode: vertical-lr; } .dayName { padding: 8px; text-align: center; font-weight: bold; } .rotate { transform: translateX(-30%) rotate(0.5turn); } .top_border { border-top: 3px solid black } </style> </head> <body> <button class="sp-hide-on-print" onclick="changeRows(20);">20 rows</button> <button class="sp-hide-on-print" onclick="changeRows(50);">50 rows</button> <table id="t" style="border: 1pt solid #000000; border-collapse:collapse"> <colgroup> <col style="width:11em;" /> </colgroup> <tbody> <tr class="header_low_height"> <th rowspan="2" style=""> <p><span>Kolejność godzin lekcyjnych</span></p> </th> <th colspan="31" style=""> <p><span>Nauczyciele <br> (przydział godzin lekcyjnych w klasach)</span></p> </th> </tr> <tr class="header_low_height"> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> <td class="vert dayName">John Kovalsky</td> </tr> </tbody> </table> </body> <script> function changeRows(num) { addRows(num); layoutForPrint(); } function addRows(num) { var table = document.getElementById('t'); var tbody = table.querySelector('tbody'); tbody.querySelectorAll('tr.data').forEach((tr)=>tr.remove()); for (let i=0; i<num; i++) { let tr = document.createElement('tr'); tr.classList.add('data'); let html = ''; html += '<td>8. 14:40:00 - 15:25:00</td>'; html += '<td>row' + (i+1) + '</td>'; for (let j=0; j < 30; j++) { html += '<td>' + Math.random().toString(36).replace(/[^az]+/g, '').substr(0, 3) + '</td>'; } tr.innerHTML = html; tbody.appendChild(tr); } } // add test data addRows(50); function FitFontSize(id, papers) { function _resizeContent(el, paper) { let fontSize = paper.fontSize || 12; let container = document.createElement('div'); container.classList.add(`sp-container`); container.classList.add(`sp-container-${paper.name}`); let css = 'box-sizing:border-box;'; css += 'overflow-y:auto;'; css += 'margin:0;padding:0;'; css += `font-size:${fontSize}px;`; css += `width:${paper.width};height:${paper.height};`; container.setAttribute('style', css); container.innerHTML = el.outerHTML; document.body.appendChild(container); let tb = container.querySelector('table').classList.remove('sp-hide-on-print'); container.querySelectorAll('[id]').forEach((el)=>el.removeAttribute('id')); // if the table overflowed try to reduce padding of td elements if (container.scrollHeight > container.clientHeight) { container.querySelectorAll('td').forEach(function(td) { td.style.padding = '0'; }); } // try to reduce the font size while (container.scrollHeight > container.clientHeight && fontSize > 5) { container.style.fontSize = `${--fontSize}px`; container.querySelector('col').style.width = fontSize * 30 / devicePixelRatio + 'px'; container.querySelectorAll('td:not(.dayName)').forEach(function(td) { td.style.lineHeight = `${fontSize}px`; }); } container.style.width = '100%'; container.style.height = '100%'; container.style.overflow = 'hidden'; } document.querySelectorAll('.sp-container').forEach((c)=>c.remove()); let el = document.getElementById(id); for (let paper of papers) { _resizeContent(el, paper); } el.classList.add('sp-hide-on-print'); } function layoutForPrint() { let papers = [ {name:'a1', width:'84cm', height:'58cm', fontSize:20}, {name:'a2', width:'59cm', height:'41cm', fontSize:18}, {name:'a3', width:'42cm', height:'28cm', fontSize:16}, {name:'a4', width:'27cm', height:'16cm', fontSize:14} ] FitFontSize('t', papers); } layoutForPrint(); </script> </html> 
·
Santiago Trujillo
Report
0
Aquí hay otra posible solución:
<script src="https://gist.github.com/jcollins-bioinfo/ee23a450529342a119ac3e4b12ed3c0a.js"></script>Código fuente de la tabla HTML:
Ejecute el fragmento anterior o acceda directamente desde: https://gist.githubusercontent.com/jcollins-bioinfo/ee23a450529342a119ac3e4b12ed3c0a/raw/108fc18b1eb3ae55590dbf69c5741dce5caf0c5f/printing-dynamic-table-how-to-make-tan-good-as-possible. html
Impresión
Tabla impresa cuidadosamente (sin encabezados/pies de página, margen mínimo, espaciado máximo, tamaño de papel A4) en Google Chrome usando la configuración que se muestra (tamaño personalizado == 34 %)
Y así es como generé el archivo HTML (usando Python Jupyter Notebook)
Ejecuté este código en una celda de cuaderno, donde el archivo html de entrada para pd.read_html puede ser solo un archivo que contiene los datos HTML de <table>...</table> :
import dash from dash import html from dash import dash_table from jupyter_dash import JupyterDash import pandas as pd app = JupyterDash() df2 = pd.read_html("name-of-html-file.html", header=[0, 2])[0] # just change this line, for input filename path app.layout = html.Div([ dash_table.DataTable( id='table', columns=[{ "name": ["Kolejność godzin lekcyjnych"], "id": "main_h1" }] + [{ "name": [x1, x2], "id": f"{x1}_{x2}" } for x1, x2 in df2.columns], data=[ { **{ "main_h1": df2.index[n] }, **{f"{x1}_{x2}": y for (x1, x2), y in data}, } for (n, data) in [*enumerate([list(x.items()) for x in df2.T.to_dict().values()])] ], merge_duplicate_headers=True, ) ]) app.run_server(mode="inline")Luego, utilicé Chrome DevTools para seleccionar la tabla de datos de la aplicación Dash que se muestra en el portátil, seleccioné solo el elemento etiquetado de la tabla HTML y lo copié en el portapapeles:
Finalmente, simplemente pegué ese código de tabla html en la plantilla de documento HTML que proporcionó en su pregunta (manteniendo así su código de estilo específico en la etiqueta <head> , etc.). Y guardó eso como un archivo HTML, abrió ese archivo en Chrome y presionó cmd/ctrl-P para abrir el diálogo de impresión, como se muestra arriba en la captura de pantalla. 🙂
·
Santiago Trujillo
Report
Answer question