我在一页上有多个表格，当我在浏览器中打开打印预览时，我遇到了一些问题，如屏幕截图所示。当其中一张 table 不适合一张纸时，就会发生这种情况。是否有有效的 CSS 方法来防止此问题。
重现行为的 HTML 页面:
<html>
<head>
<title>Page Title</title>
<style>
table {
border-collapse: collapse;
margin-bottom: 30px;
}
th, td {
border: 1px solid #777;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header cell</th>
<th>Header cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Header cell</th>
<th>Header cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
<tr>
<td>Body cell</td>
<td>Body cell</td>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
使用 page-break-inside 属性，它设置是否应避免在指定元素内分页。
<style>
@media print {
table {page-break-inside: avoid;}
}
</style>
关于两页之间的 Html 表头重复且正文为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57909282/