数据结构
网络
关系数据库管理系统
操作系统
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+ 次查看
