html - Page-Break-inside 属性在 Chrome 中不起作用

Question

我有一个长表数据，其中有很多行和嵌套表。当我打印这些数据时，表格和嵌套表格的行只是在分页符处中断，这意味着表格和数据被分成页面，所以我在那里使用以下 CSS 属性:-

table tr {
 page-break-inside:avoid;
 position:relative;
 }

但这对我来说不起作用，你可以在这里看到现场演示:-- http://jsfiddle.net/npsingh/S8vr8/2/show/

请通过以下链接编辑代码:--
http://jsfiddle.net/npsingh/S8vr8/2/
---[打印页面只需按[CTRL+P]或右击并点击打印选项]---

我使用的是 Google Chrome 版本 29.0.1547.66 m

请告诉我具体问题出在哪里。 谢谢

Answer 1

与其将 page-break-inside:avoid; 放在表的 tr 上，不如尝试像这样直接在表上应用它:

table {
    page-break-inside:avoid;
    position:relative;
}

同时添加这个媒体查询:

@media print {
   table {
        page-break-inside:avoid;
        position:relative;
    }
}