當 Div 表在打印時被分頁符破壞時，如何讓 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 和 Opera 上沒有。 所以我認為這是某種特定的瀏覽器錯誤，經過一番搜索，我發現了這個：

闖入：避免；

將此 CSS 添加到 .TableHeading 和 .TableFoot - 測試它並工作。 但它在某種程度上打破了頁腳的垂直對齊方式

解決方案是在這里找到的，有歷史和解釋。

希望有幫助