資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究列印大型 HTML 表格時如何處理分頁？
在HTML中，當我們需要列印一個包含很多行的表格時，會出現當頁面結束時如何保持資料完整的問題。如果未監控分頁符，它們也可能將一行分成兩半，並以突然的方式截斷表格。這可能會弄亂整個格式並破壞佈局。在本教程中，我們將探討在發生分頁符時列印包含多行表格內容的方法。
page-break-inside 和 page-break-auto
CSS 的page-break 屬性可用於處理當表格有多行時發生的分頁符。它是一個有助於定義頁面上元素在列印時如何顯示的屬性。這使得文件的列印更像書籍。Page-break 不是一個可以直接使用的屬性，但它包含三個可根據需要使用的屬性。
page-break-before 屬性指定在元素框之前是否（以及多少）允許分頁符。此屬性的值不是確定是否應在元素後進行分頁的唯一因素。此決定還會受到前面元素的 page-break-after 值以及任何祖先元素的 page-break-inside 值的影響。以下是語法：
page-break-before: auto|always|avoid|left|right;
其中，
Auto: 預設值。分頁符會自動出現。
Always: 始終在插入元素之前包含分頁符。
Avoid: 避免在元素之前使用分頁符（如果可能）。
Left: 在元素之前插入分頁符，以使下一頁成為左頁。
Right: 在元素之前插入分頁符，以確保下一頁格式化為右頁。
page-break-after 屬性指定在元素框之後是否（以及多少）允許分頁符。此屬性的值不是確定是否應在元素後進行分頁的唯一因素。
此決定還會受到後續元素的 page-break-before 值以及任何祖先元素的 page-break-inside 值的影響。以下是語法
page-break-after: auto|always|avoid|left|right;
Auto: 預設值。分頁符會自動出現。
Always: 始終在插入元素之後包含分頁符。
Avoid: 避免在元素之後使用分頁符（如果可能）。
Left: 在元素之後插入分頁符，以使下一頁成為左頁。
Right: 在元素之後插入分頁符，以確保下一頁格式化為右頁。
page-break-inside 屬性指定是否允許在元素框內進行分頁符。此屬性的值不是確定是否應在元素後進行分頁的唯一因素。
此決定還將受到任何後代元素的 page-break-before 和 page-break-after 值的影響。以下是語法：
page-break-inside: auto|avoid;
其中，
Auto: 預設值。分頁符會自動出現。
Avoid: 避免在元素內部使用分頁符（如果可能）。
示例
在此示例中，我們將 <table> 元素的 page-break-inside 屬性設定為“auto”，並對 <tr> 元素使用“avoid”值。我們還將 page-break-after 屬性新增到 <tr>，然後分別對 <thead> 和 <tfoot> 元素指定帶有“table-header-group”和“table-footer-group”值的 display 屬性。
<!DOCTYPE html>
<html>
<head>
<title>How to Handle Page Breaks when Printing a Large HTML Table?</title>
<style>
table {
page-break-inside: auto;
background-color:lightblue;
border:2px solid black;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
td{
border:2px solid navy;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>This is the table header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>This is the table footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<!--several more rows -->
</tbody>
</table>
</body>
</html>
將 div 標籤嵌入到 <tr> 和 <td> 表格元素中
基本上，我們不能中斷 <tr> 或 <td>，因為它們不是塊級元素。因此，我們將 <div> 嵌入到每個元素中，並針對 div 應用我們的分頁規則。其次，我們在每個 <div> 的頂部新增一些填充以補償任何樣式偽影。
示例
<style>
@media print {
th div, td div {
margin-top:-10px;
padding-top5px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
3K+ 次檢視
