我在一页上有几个表格，当我在浏览器中打开打印预览时，我遇到了一些问题，如屏幕截图所示。当其中一张桌子不适合纸张时，就会发生这种情况。是否有有效的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>