我正在尝试在 Chrome 中打印文档时将一些 html 和 css 放在一起：
- 在每个页面上显示固定的页眉和页脚
- 显示 2 列信息。理想情况下，这些列会在移动到下一页之前从左向右流动。
我试图改编这个很好的指南，它使用固定的页眉和页脚，在thead和tfoot. 我下面的片段接近我想要的（单击打印我查看打印布局）：
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid rgb(22, 7, 7); /* for demo */
}
.two-column {
column-count: 2;
}
h2 {
margin: 0
}
table {
width: 100%
}
.content {
width: 100%;
height: 75px;
border: 1px solid blue;
break-inside: avoid;
display: flex;
align-items: center;
justify-content: center;
}
@page {
margin: 20mm;
size: 'A4';
}
@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}<html>
<head>
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='two-column'>
<div class='content'>1</div>
<div class='content'>2</div>
<div class='content'>3</div>
<div class='content'>4</div>
<div class='content'>5</div>
<div class='content'>6</div>
<div class='content'>7</div>
<div class='content'>8</div>
<div class='content'>9</div>
<div class='content'>10</div>
<div class='content'>11</div>
<div class='content'>12</div>
<div class='content'>13</div>
<div class='content'>14</div>
<div class='content'>15</div>
<div class='content'>16</div>
<div class='content'>17</div>
<div class='content'>18</div>
<div class='content'>19</div>
<div class='content'>20</div>
<div class='content'>21</div>
<div class='content'>22</div>
<div class='content'>23</div>
<div class='content'>24</div>
<div class='content'>25</div>
<div class='content'>26</div>
<div class='content'>27</div>
<div class='content'>28</div>
<div class='content'>29</div>
<div class='content'>30</div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>问题是，当打印预览中的第一列中断时，第二列顶部会有额外的 100 像素空间。我怀疑这是因为thead在分栏符和分页符上以某种方式“重复”：
有没有办法避免这种情况？
我也只关心在最新的 Chrome 浏览器中实现这一点。
谢谢。