css - 分组表行和分页符

标签 css

我有一张比较长的 table 。每条记录有六行。所以标识符为 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>与它决裂。

如果有帮助,我可以轻松地将一个类附加到所有六行。任何人都可以指出我如何做到这一点的正确方向吗?非常感谢您的帮助。

最佳答案

一种可能性是将引用同一记录的所有行分组到单个 tbody 中,因此您有更多的 tbody,每个包含 6 行(it's perfectly fine并且作为一个原子组似乎是合乎逻辑的), 然后为媒体打印添加此规则

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

这样可以避免 tbody 中的分页符。
不幸的是,每个现代浏览器都支持 page-break-inside except Firefox (漏洞 #132035)

关于css - 分组表行和分页符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10599793/

相关文章:

css - 此屏幕截图中是否有 CSS 选择器?

javascript - 我如何解决 net::ERR_ABORTED 404 (Not Found) 在 View 中,错误不让显示 css Laravel 6.0?

javascript - React Native 如何修复底部的某些问题

html - 网格系统如何为全宽页面工作?

html - 如何防止对 HTML 中的某些属性进行硬编码?

html - 表格列中复选框的对齐方式

html - 使用 bootstrap 网格和 ng-repeat 元素居中并填充页面

css - 在小型设备上重新排序 Foundation XY 网格单元

css - Bootstrap 3 在移动设备上的菜单/导航栏中滑动

css - Rails 4 不是 image_url 的正确路径