如何使DIV表页眉和页脚在打印时被分页符打断时重复

Question

我正试图用div替换一个普通的html表。然而，当打印或呈现为PDF时，表被用分页符分割时，它的行为并不像我预期的那样。我假设它的行为就像一个普通的表，表的页眉在页面的顶部重复，表的页脚在底部重复。

[标题行]

[表行]

---分页符--

[标题行]

[表行]

[页脚行]

.Table {
display: table;
width: 100%;
}
.TableRow {
display: table-row;
}
.TableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.TableCell,
.TableHead {
display: table-cell;
padding: 3px 10px;
border: 1px solid #999999;
}
.TableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.TableBody {
display: table-row-group;
}

<div class="Table">
<div class="TableHeading">
<div class="TableHead">
Month
</div>
<div class="TableHead">
Person
</div>
<div class="TableHead">
Amount
</div>
</div>
<div class="TableBody">
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
<div class="TableRow">
<div class="TableCell">
January
</div>
<div class="TableCell">
Bob
</div>
<div class="TableCell">
€100
</div>
</div>
<div class="TableRow">
<div class="TableCell">
February
</div>
<div class="TableCell">
Fred
</div>
<div class="TableCell">
€130
</div>
</div>
<div class="TableRow">
<div class="TableCell">
March
</div>
<div class="TableCell">
Larry
</div>
<div class="TableCell">
€150
</div>
</div>
</div>
<div class="TableFoot">
<div class="TableHead">
&nbsp;
</div>
<div class="TableHead">
&nbsp;
</div>
<div class="TableHead">
€1234
</div>
</div>
</div>

Answer 1

复制了您的代码片段，我发现在Firefox&Edge，但不是Chrome&歌剧所以我认为这是某种特定的浏览器错误，经过一番搜索，我发现了这个：

突破内部：避免；

将这个CSS添加到.TableHeading和.TableFoot中-测试它并工作。但它在某种程度上打破了页脚的垂直对齐

解决方案是在这里找到的，有历史和解释。

希望能帮助