Chrome (v51) - 在 table 行之间插入分页符的媒体查询 - 仅限横向

Question

我有一个无法修改的大 HTML table，如果方向仅为横向，我想在打印时在每行之后放置分页符。

我创建了一个小测试页面来寻求解决方案。

此代码在 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 放在标签里。

Answer 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) - 在 table 行之间插入分页符的媒体查询 - 仅限横向

Chrome (v51) - Media query to insert page breaks between table rows - landscape only

css

printing

google-chrome

media-queries