帶有標題的打印分頁符

Question

我有一個<table> 。

 table { page-break-inside: auto } tr { page-break-inside: avoid; page-break-after: auto } thead { display: table-header-group } tfoot { display: table-footer-group }

 <h2>Title</h2> <table> <thead> <tr> <th> Test </th> <th> Test 2 </th> </tr> </thead> <tbody> <td> Test </td> <td> Test 2 </td> </tbody> </table> <h2>Another one</h2> <table> <thead> <tr> <th> Test </th> <th> Test 2 </th> </tr> </thead> <tbody> <td> Test </td> <td> Test 2 </td> </tbody> </table>

我希望，當我打印時，標題與其余部分一起並在正確的位置中斷，因為有時，標題停留在頁面的末尾，而<table>位於另一頁上。

Answer 1

不幸的是，大多數瀏覽器都不太支持分頁符屬性（尤其是avoid值）。

同時，您可以使用以下解決方案：

• 使用caption標簽將標題移動到表格中
• 添加page-break-before: always; 在你的表格元素 CSS

 table { page-break-inside: auto; page-break-before: always; /* add this line */ } tr { page-break-inside: avoid; page-break-after: auto; } thead { display: table-header-group; } tfoot { display: table-footer-group; }

 <table> <caption> <h2>Title</h2> </caption> <thead> <tr> <th> Test </th> <th> Test 2 </th> </tr> </thead> <tbody> <td> Test </td> <td> Test 2 </td> </tbody> </table> <table> <caption> <h2>Another one</h2> </caption> <thead> <tr> <th> Test </th> <th> Test 2 </th> </tr> </thead> <tbody> <td> Test </td> <td> Test 2 </td> </tbody> </table>

盡管這可行，但請注意，此解決方案不是最可持續的，因為您可能會打印比需要更多的頁面。

另外，不要忘記將鏈接標簽的媒體屬性設置為“打印”，如下所示：

<link rel="stylesheet" media="print" href="print.css">