0
462
ViewsPrinting dynamic table - how to make as good as possible
I'm generating dynamically table N columns x M rows
and I'm trying to make it print with default printing options as good as possible
So,
Whenever we're printing the table on A1/A2/A3/A4 paper, then table should TRY to occup full one piece of paper, its avaliable space with as biggest font as possible (people who will read it may not have perfect eyesight)
But when I go to e.g Microsoft Edge (it has tools to manipulate scaling, margins and stuff, so that's why I used it, which kinda worries me too, that printing results on Chrome/FF/Edge may vary)
and use preview (CTRL+P), then it always either takes more than one page, or uses only e.g 40% of avaliable space
A4 paper, no margins:
fit to the printing area:
real size:
Part of Code:
<!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>
Here's full code (due to characters limit):
https://pastebin.com/raw/36UuuPZy
How to print huge tables right?! :O
·
Santiago Trujillo
3 answers
Answer question0
I looked at your code, did some work on it and got this working... I hope it is to your satisfaction. I have reduced the characters in the code below in order to meet StackOverflow's 30,000 characters limit. To get the full code, go to Fit-To-Print-Area : GitHub Gist . You can find screenshots below of the outcome
<!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
I added a javascript method FitFontSize to create diffrent layouts for different print sizes. it will try to reduce font size automatically when the table exceeds one page, and keep default font size if the table fit height of print paper.
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);
here is the full code and a live demo
<!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(/[^a-z]+/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
Here's another possible solution:
<script src="https://gist.github.com/jcollins-bioinfo/ee23a450529342a119ac3e4b12ed3c0a.js"></script>Source code for HTML table:
Run snippet above, or, get directly from: https://gist.githubusercontent.com/jcollins-bioinfo/ee23a450529342a119ac3e4b12ed3c0a/raw/108fc18b1eb3ae55590dbf69c5741dce5caf0c5f/printing-dynamic-table-how-to-make-as-good-as-possible.html
Printing
Table printed neatly (no headers/footers, minimal margin, max spacing, size A4 paper) in Google Chrome using the shown settings (custom size == 34%)
And here's how I generated the HTML file (using Python Jupyter Notebook)
Ran this code in a notebook cell, where the input html file to pd.read_html can be just a file containing the <table>...</table> HTML data:
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")
Then, I used Chrome DevTools to select the displayed in-notebook Dash app data table, selected only the HTML table tagged element, and copied it to clipboard:
Finally, I simply pasted that html table code into the HTML doc template you provide in your question (thus keeping your specific style code in the <head> tag, etc.). And saved that as an HTML file, opened that file in Chrome, and pressed cmd/ctrl-P to open the print dialogue, as shown above in screenshot. 🙂
·
Santiago Trujillo
Report
Answer question