css print - 大表 - 最后一行被拆分为某些页面答案

【问题标题】：css print - large table - last row getting split for some pagescss print - 大表 - 最后一行被拆分为某些页面
【发布时间】：2012-09-20 07:19:16
【问题描述】：

我在打印时使用下面的css来显示大量的表格数据。

#toolbar.fixed + .content{
  overflow: visible;
  position: static;
  bottom: 0em;
}

table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }

我使用的浏览器是 IE 7。我面临的问题是某些页面最后一行的数据在当前页面和下一页之间被拆分。我试图弄清楚我上面的 css 是否有问题，或者我是否需要引入额外的 css 以防止最后一行数据（仅在某些页面上）停止在两页之间拆分。

【问题讨论】：

标签： css printing internet-explorer-7 page-break

【解决方案1】：

page-break-inside 在许多主流浏览器中仍然不受支持： http://www.w3schools.com/cssref/pr_print_pagebi.asp

另请注意，定位对象内不允许分页符。

使用page-break-before: auto; 和page-break-after: auto; 可以解决此问题，但您可以使用this page 作为指南来创建您需要的样式，而无需使用page-break-inside ...

【讨论】：

【解决方案2】：

使用下面的代码..... `function printControl(){

    var table = document.getElementById("DataList1");
    var count = table.rows.length;
    for (var i = 0; i < count; i++) {
        if ((i % 4 == 0)&&(i!=0)) {
            table.rows[i].style.cssText = "page-break-after:always";
        }
    }
}`

【讨论】：