如何创建 CSS 网格表格，其标题出现在表格跨越的每个打印页面上？

Question

工作正常

<table>

<tr>

内的 HTML

<table>

的行

<thead>

出现在表格延伸的每个打印页面上。

但是对于网格表？

如何在表格延伸的每个打印页面上自动打印使用display: grid实现的响应式

CSS网格

表格的标题？

注意：

表格标题不得出现在所有页面上。它必须打印在表格延伸的页面上！

文档中有几个表格。所有这些都是使用 CSS Grid 实现的。全部都可以跨多个页面。

注意：此应用程序不允许使用java脚本。

这不起作用

position: fixed;

position: sticky;

display: table-header-group;

Answer 1

打印时尝试设置

position: fixed

。

这是一个简单的示例（不能作为 SO 片段工作 - 在浏览器中运行并尝试打印）。

<style>
.grid {
  display: grid;
  width: 100vw;
}
@media print {
.grid .header {
  position: fixed;
  top:0;
  left: 0;
}
}
</style>
<div class="grid">
<div class="header">header</div>
<div>top <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bottom</div>
</div>