【发布时间】:2021-10-27 18:51:14
【问题描述】:
我正在动态生成表 N 列 x M 行
我正在尝试使用尽可能好的默认打印选项进行打印
所以,
每当我们在 A1/A2/A3/A4 纸上打印表格时,表格应尽量占满一张纸,其可用空间以尽可能大的字体(会阅读它的人可能没有完美的视力)
但是当我使用例如 Microsoft Edge 时(它具有操作缩放、边距和其他东西的工具,所以这就是我使用它的原因,这让我也有点担心,Chrome/FF/Edge 上的打印结果可能会有所不同)
并使用预览 (CTRL+P),然后它总是占用一页以上,或者只使用例如 40% 的可用空间
A4 纸,无边距:
fit to the printing area:
real size:
部分代码:
<!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>
这里是完整代码(由于字符限制):
https://pastebin.com/raw/36UuuPZy
如何打印大表对不对?! :O
【问题讨论】: