打印动态表——如何制作得尽可能好
我正在动态生成 N 列 x M 行的表
\n我正在尝试使其尽可能使用默认打印选项进行打印
\n所以，
\n每当我们在A1/A2/A3/A4纸上打印表格时，表格应该尽量占据一张纸的可用空间，字体尽可能大（会看的人视力可能不太好） ）
\n但是当我使用 Microsoft Edge 时（它有控制缩放、边距等的工具，这就是我使用它的原因，这也让我担心，Chrome/FF/Edge 上的打印结果可能会有所不同）
\n并使用预览 (CTRL+P)，那么它总是要么占用一页以上，要么仅使用 40% 的可用空间
\nA4纸，无边距：
\nfit to the printing area:
real size:
部分代码：
\n<!DOCTYPE html>\n<html lang="pl-PL">\n<head>\n<title>Plan zaj\xc4\x99\xc4\x87</title>\n\n<style> \n .printable-tables \n {\n white-space: nowrap;\n }\n\n .printable-tables > table \n {\n display: inline-table;\n }\n\n @page \n {\n size: landscape;\n }\n\n .printable-tables > table \n {\n page-break-before: always;\n page-break-after: always;\n }\n\n .header_low_height\n {\n }\n\n *\n {\n }\n\n table,\n th,\n td \n {\n border: 1px solid black;\n padding-left: 5px;\n padding-right: 5px;\n }\n\n tr td\n {\n border-right-style: solid;\n border-right-width: 1pt;\n border-bottom-style: solid;\n border-bottom-width: 1pt;\n padding-right: 5.4pt;\n padding-left: 5.65pt;\n text-align: center\n }\n\n .vert \n {\n writing-mode: vertical-lr;\n }\n\n th {\n }\n\n .td_low_height\n {\n }\n\n\n .dayName \n {\n padding: 8px;\n text-align: center;\n font-weight: bold;\n }\n\n .rotate \n {\n transform: translateX(-30%) rotate(0.5turn);\n }\n\n .top_border \n {\n border-top: 3px solid black\n }\n</style>\n\n</head>\n<body>\n <table style="border: 1pt solid #000000; border-collapse:collapse">\n <tr class="header_low_height">\n <th rowspan="2" style=""> \n <p><span>Kolejno\xc5\x9b\xc4\x87 godzin lekcyjnych</span></p>\n </th>\n \n <th colspan="31" style=""> \n <p><span>Nauczyciele <br> (przydzia\xc5\x82 godzin lekcyjnych w klasach)</span></p>\n </th>\n </tr>\n \n <tr class="header_low_height">\n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n <td class="vert dayName">John Kovalsky</td> \n </tr>\n\n <tr> \n <td>1. 07:55:00 - 08:40:00</td> \n <td>-</td> \n <td>OPa</td> \n <td>IV</td> \n <td>-</td> \n <td>IIIB</td> \n <td>-</td> \n <td>IA</td> \n <td>VIIB</td> \n <td>VIII</td> \n <td>-</td> \n <td>IIIA</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>0</td> \n <td>IB</td> \n <td>-</td> \n <td>OPb</td> \n <td>II</td> \n <td>-</td> \n <td>-</td> \n <td>VIIA</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>VI</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>V</td>\n </tr>\n <tr> \n <td>2. 08:50:00 - 09:35:00</td> \n <td>-</td> \n <td>OPa</td> \n <td>V</td> \n <td>-</td> \n <td>IIIB</td> \n <td>-</td> \n <td>IA</td> \n <td>IV</td> \n <td>VIII</td> \n <td>-</td> \n <td>IIIA</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>0</td> \n <td>II</td> \n <td>-</td> \n <td>OPb</td> \n <td>IB</td> \n <td>-</td> \n <td>-</td> \n <td>VIIB</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>VIIA</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>VI</td>\n </tr>\n <tr> \n <td>3. 09:45:00 - 10:30:00</td> \n <td>-</td> \n <td>OPa</td> \n <td>VIIB</td> \n <td>-</td> \n <td>IIIB</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>V</td> \n <td>-</td> \n <td>IIIA</td> \n <td>II</td> \n <td>-</td> \n <td>VI</td> \n <td>0</td> \n <td>IA</td> \n <td>-</td> \n <td>OPb</td> \n <td>-</td> \n <td>IB</td> \n <td>-</td> \n <td>VIII</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>IV</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>VIIA</td>\n </tr>\n <tr> \n <td>4. 10:40:00 - 11:25:00</td> \n <td>-</td> \n <td>OPa</td> \n <td>VIII</td> \n <td>-</td> \n <td>IIIB</td> \n <td>-</td> \n <td>-</td> \n <td>VI</td> \n <td>-</td> \n <td>-</td> \n <td>IIIA</td> \n <td>II</td> \n <td>-</td> \n <td>VIIB</td> \n <td>0</td> \n <td>-</td> \n <td>-</td> \n <td>OPb</td> \n <td>IA</td> \n <td>IB</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>-</td> \n <td>V</td> \n <td>IV</td> \n <td>-</td> \n <td>-</td> \n <td>VIIA</td>\n </tr>\n </table>\n</body>\n</html>\n这是完整的代码（由于字符限制）：
\nhttps://pastebin.com/raw/36UuuPZy
\n如何打印巨大的表格？！：哦
\n小智 2
我添加了一个 javascript 方法FitFontSize来为不同的打印尺寸创建不同的布局。当表格超过一页时，它会尝试自动缩小字体大小，如果表格适合打印纸的高度，则保持默认字体大小。
let papers = [\n {name:\'a1\', width:\'84cm\', height:\'58cm\', fontSize:20},\n {name:\'a2\', width:\'59cm\', height:\'41cm\', fontSize:18},\n {name:\'a3\', width:\'42cm\', height:\'28cm\', fontSize:16},\n {name:\'a4\', width:\'27cm\', height:\'16cm\', fontSize:14}\n ];\n // the fontSize is the default font size for diffrent paper size\n FitFontSize(\'t\', papers);\n这是完整的代码和现场演示
\n<!DOCTYPE html>\n<html lang="pl-PL">\n<head>\n<title>Plan zaj\xc4\x99\xc4\x87</title>\n\n<style>\n table {\n table-layout:fixed;\n width:100%;\n height:100%;\n }\n\n @media screen {\n .sp-container {\n position:absolute;\n left:-99999px;\n top:-99999px;\n }\n }\n\n .sp-container-a4 .dayName {\n padding:0;\n }\n\n @media print {\n @page\n {\n size: landscape;\n padding: 0;\n margin:0.5em;\n }\n\n html, body {padding:0; margin:0; height:100vh; overflow:hidden;}\n .sp-container {display:none;}\n .sp-hide-on-print {display:none;}\n }\n\n @media print and (min-width: 10cm) {\n .sp-container-a1 {display:none;}\n .sp-container-a2 {display:none;}\n .sp-container-a3 {display:none;}\n .sp-container-a4 {display:block;}\n }\n\n @media print and (min-width: 30cm) {\n .sp-container-a1 {display:none;}\n .sp-container-a2 {display:none;}\n .sp-container-a3 {display:block;}\n .sp-container-a4 {display:none;}\n }\n\n @media print and (min-width: 50cm) {\n .sp-container-a1 {display:none;}\n .sp-container-a2 {display:block;}\n .sp-container-a3 {display:none;}\n .sp-container-a4 {display:none;}\n }\n\n @media print and (min-width: 80cm) {\n .sp-container-a1 {display:block;}\n .sp-container-a2 {display:none;}\n .sp-container-a3 {display:none;}\n .sp-container-a4 {display:none;}\n }\n\n table,\n th,\n td\n {\n border: 1px solid black;\n /*padding-left: 5px;\n padding-right: 5px;*/\n }\n\n tr td\n {\n border-right-style: solid;\n border-right-width: 1pt;\n border-bottom-style: solid;\n border-bottom-width: 1pt;\n /*padding-right: 5.4pt;\n padding-left: 5.65pt;*/\n text-align: center\n }\n\n .vert\n {\n writing-mode: vertical-lr;\n }\n\n .dayName\n {\n padding: 8px;\n text-align: center;\n font-weight: bold;\n }\n\n .rotate\n {\n transform: translateX(-30%) rotate(0.5turn);\n }\n\n .top_border\n {\n border-top: 3px solid black\n }\n</style>\n\n</head>\n<body>\n <button class="sp-hide-on-print" onclick="changeRows(20);">20 rows</button>\n <button class="sp-hide-on-print" onclick="changeRows(50);">50 rows</button>\n\n <table id="t" style="border: 1pt solid #000000; border-collapse:collapse">\n <colgroup>\n <col style="width:11em;" />\n </colgroup>\n <tbody>\n <tr class="header_low_height">\n <th rowspan="2" style="">\n <p><span>Kolejno\xc5\x9b\xc4\x87 godzin lekcyjnych</span></p>\n </th>\n <th colspan="31" style="">\n <p><span>Nauczyciele <br> (przydzia\xc5\x82 godzin lekcyjnych w klasach)</span></p>\n </th>\n </tr>\n <tr class="header_low_height">\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n <td class="vert dayName">John Kovalsky</td>\n </tr>\n </tbody>\n </table>\n</body>\n<script>\nfunction changeRows(num) {\n addRows(num);\n layoutForPrint();\n}\n\nfunction addRows(num) {\n var table = document.getElementById(\'t\');\n var tbody = table.querySelector(\'tbody\');\n tbody.querySelectorAll(\'tr.data\').forEach((tr)=>tr.remove());\n for (let i=0; i<num; i++) {\n let tr = document.createElement(\'tr\');\n tr.classList.add(\'data\');\n let html = \'\';\n html += \'<td>8. 14:40:00 - 15:25:00</td>\';\n html += \'<td>row\' + (i+1) + \'</td>\';\n for (let j=0; j < 30; j++) {\n html += \'<td>\' + Math.random().toString(36).replace(/[^a-z]+/g, \'\').substr(0, 3) + \'</td>\';\n }\n tr.innerHTML = html;\n tbody.appendChild(tr);\n }\n}\n// add test data\naddRows(50);\n\nfunction FitFontSize(id, papers) {\n function _resizeContent(el, paper) {\n let fontSize = paper.fontSize || 12;\n let container = document.createElement(\'div\');\n container.classList.add(`sp-container`);\n container.classList.add(`sp-container-${paper.name}`);\n\n let css = \'box-sizing:border-box;\';\n css += \'overflow-y:auto;\';\n css += \'margin:0;padding:0;\';\n css += `font-size:${fontSize}px;`;\n css += `width:${paper.width};height:${paper.height};`;\n container.setAttribute(\'style\', css);\n container.innerHTML = el.outerHTML;\n\n document.body.appendChild(container);\n let tb = container.querySelector(\'table\').classList.remove(\'sp-hide-on-print\');\n container.querySelectorAll(\'[id]\').forEach((el)=>el.removeAttribute(\'id\'));\n\n // if the table overflowed try to reduce padding of td elements\n if (container.scrollHeight > container.clientHeight) {\n container.querySelectorAll(\'td\').forEach(function(td) {\n td.style.padding = \'0\';\n });\n }\n // try to reduce the font size\n while (container.scrollHeight > container.clientHeight && fontSize > 5) {\n container.style.fontSize = `${--fontSize}px`;\n container.querySelector(\'col\').style.width = fontSize * 30 / devicePixelRatio + \'px\';\n container.querySelectorAll(\'td:not(.dayName)\').forEach(function(td) {\n td.style.lineHeight = `${fontSize}px`;\n });\n }\n\n container.style.width = \'100%\';\n container.style.height = \'100%\';\n container.style.overflow = \'hidden\';\n }\n\n document.querySelectorAll(\'.sp-container\').forEach((c)=>c.remove());\n let el = document.getElementById(id);\n for (let paper of papers) {\n _resizeContent(el, paper);\n }\n el.classList.add(\'sp-hide-on-print\');\n}\n\nfunction layoutForPrint() {\n let papers = [\n {name:\'a1\', width:\'84cm\', height:\'58cm\', fontSize:20},\n {name:\'a2\', width:\'59cm\', height:\'41cm\', fontSize:18},\n {name:\'a3\', width:\'42cm\', height:\'28cm\', fontSize:16},\n {name:\'a4\', width:\'27cm\', height:\'16cm\', fontSize:14}\n ]\n FitFontSize(\'t\', papers);\n}\n\nlayoutForPrint();\n</script>\n</html>\n