MDN表示Safari浏览器支持page-break-inside:请避免,但是当我在表上使用它时,它将无法正常工作。我不能仅将表更改为显示:inline-block,因为我需要它表现为表。我尝试创建此超级基本的html页面以在safari 10上进行测试,并确认当我打印预览时,表格在多个页面(甚至是中间行)都被破坏了。在chrome中,一切正常。我是否需要设置规范中未概述的任何特殊的safari字段或标签,还是只是接受page-break- *在safari中不能很好地工作?
table {
position: relative;
border-collapse: collapse;
page-break-inside: avoid;
border-bottom: solid 2px red;
width: 100%;
}
td {
border: solid 1px black;
padding: 50px;
page-break-inside: avoid;
}
<div>On first page</div>
<div style="page-break-before: always">On second page</div>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test table column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Test table column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Test table column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Test table column 1</td>
<td>Column 2</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Table 2 Col 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Table 3 Col 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Long table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
<tr>
<td>Test table column</td>
</tr>
</tbody>
</table>