Chrome (v51) - 用于在表格行之间插入分页符的媒体查询 - 仅限横向
Posted
技术标签:
【中文标题】Chrome (v51) - 用于在表格行之间插入分页符的媒体查询 - 仅限横向【英文标题】：Chrome (v51) - Media query to insert page breaks between table rows - landscape only 【发布时间】：2016-09-24 22:02:13 【问题描述】：我有一个无法修改的大型 html 表格，如果方向仅为横向，我想在打印时在每行之后放置分页符。
我创建了一个小测试页面来寻求解决方案。
此代码在 Firefox 46.0 下按预期工作，但在 Chrome 51 下根本不工作。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS print media query test</title>
<style>
body
font-family: arial,sans;
table
margin: 0 auto;
table tr
height: 500px;
vertical-align: top;
table td
border: 1px solid #23ffff;
background-color: #edffff;
padding: 15px;
cell-spacing: 5px;
@media print and (orientation:landscape)
table tr
page-break-after: always !important;
</style>
</head>
<body>
<table>
<tr>
<td>$i is 1 and $j is 1</td>
<td>$i is 1 and $j is 2</td>
<td>$i is 1 and $j is 3</td>
<td>$i is 1 and $j is 4</td>
</tr>
<tr>
<td>$i is 2 and $j is 1</td>
<td>$i is 2 and $j is 2</td>
<td>$i is 2 and $j is 3</td>
<td>$i is 2 and $j is 4</td>
</tr>
<tr>
<td>$i is 3 and $j is 1</td>
<td>$i is 3 and $j is 2</td>
<td>$i is 3 and $j is 3</td>
<td>$i is 3 and $j is 4</td>
</tr>
<tr>
<td>$i is 4 and $j is 1</td>
<td>$i is 4 and $j is 2</td>
<td>$i is 4 and $j is 3</td>
<td>$i is 4 and $j is 4</td>
</tr>
</table>
</body>
</html>
这是一个测试页面，我通常不会将 CSS 放在标签中。
【问题讨论】：
【参考方案1】：CSS 分页符属性only work on block-level elements。添加display: block 并根据需要调整间距。
@media print and (orientation:landscape)
table tr
display: block;
page-break-after: always;
【讨论】：
以上是关于Chrome (v51) - 用于在表格行之间插入分页符的媒体查询 - 仅限横向的主要内容，如果未能解决你的问题，请参考以下文章