📅 最后修改于: 2023-12-03 15:38:46.573000 🧑 作者: Mango
在打印具有大量行的表格时，为了使打印结果更清晰，我们通常会将表格分页。CSS 提供了一个方便的功能来实现这一点。本文将介绍如何使用 CSS 分页符来打印包含大量行的表格。
CSS 分页符由 page-break-before 或 page-break-after 属性来指定。例如：
table {
page-break-after: always;
}
这样就会在表格下方添加一个分页符，使表格在打印时分页。在上述代码中，我们使用了 page-break-after 属性，根据需要，也可以使用 page-break-before 来创建在表格上方的分页符。
要将分页符应用于表格，我们需要将 CSS 代码应用于表格元素。例如：
table {
page-break-inside: avoid;
}
这个代码将避免分页符出现在表格内部，从而确保每个表格都能在页面上完整显示。如果表格比页面高，那么就会在表格下方添加一个分页符。
下面的代码演示了如何在包含大量数据的表格中添加分页符：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
page-break-inside: avoid;
}
td, th {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #ddd;
}
.page-break {
page-break-after: always;
}
</style>
</head>
<body>
<h1>员工信息表</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>部门</th>
<th>联系电话</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<!-- 这里插入大量数据 -->
</tbody>
</table>
</body>
</html>
在上面的代码中，我们使用了 page-break-after: always 属性为表格下方添加分页符。此外，我们还在表格上应用了 page-break-inside: avoid 属性，以确保不会在表格内部插入分页符。这将确保表格始终完整地打印到一页上。
使用 CSS 分页符可以使我们更简单地控制表格的分页。通过将 page-break-before 或 page-break-after 属性应用于表格元素，我们可以在需要时在表格上方或下方添加分页符。