css - 分组表格行和分页符

Question

我有一张比较长的桌子。每条记录有六行。因此，标识符为 16 的项目有<tr-16-1><tr-16-2>.....<tr-16-6>，标识符 25 将是<tr-25-1><tr-25-2>.....<tr-25-6>，等等。

我希望分页符不拆分六行的任何分组。因此，如果<tr-25-6>要在新页面上继续，我希望所有人都<tr-25's>打破它。

如果有帮助，我可以轻松地将一个类附加到所有六行。谁能指出我如何做到这一点的正确方向？非常感谢你的帮助。

Answer 1

一种可能性是将引用同一记录的所有行分组在一个单一的行中tbody，因此您有更多tbody的每行包含 6 行（这非常好，并且作为一个原子组似乎是合乎逻辑的），然后为媒体打印添加此规则

@media print {
    tbody {
        page-break-inside: avoid;
    }
}

tbody这样可以避免a 内的分页符。
不幸的是，除 Firefox 之外page-break-inside的所有现代浏览器都支持（错误#132035）

Answer 2

如果您不想使用@media 标签，这是另一种方式：

添加class=print-entire到您的表中，并添加此样式：

table.print-entire tr td, table.print-entire tr th {
        page-break-inside: avoid;
    }

Answer 3

我会试一试：

@media print {
    tr, td, th { page-break-inside:avoid }
}