如何在Google Chrome的HTML表格中实现分页？ [英] How to achieve page break in HTML table for Google Chrome?

问题描述

我试图在HTML页面中打印使用jQuery生成的大表。我使用Chrome 26.0.141。

  > #membersList table {page-break-inside：auto; position：relative} 
 #membersList tr {page-break-before：avoid; page-break-after：auto; position：relative} 
 #membersList td {border：solid 1px #CCCCCC; width：auto; position：relative} 
 #membersList thead {display：table-header-group ; position：relative} 
 #membersList tfoot {display：table-footer-group; positioion：relative} 
  

$ b b

这个dint工作，所以我搜索，并得到这个链接
Google Chrome打印页中断

基于该链接中的一个答案，我使用以下CSS属性

  -webkit-region-break-inside：avoid; 
  

但是当我运行并检查元素时，默认情况下它会被触发。

什么是解决方案？有很多我搜索的帖子。他们说最近的版本不支持分页符。

解决方案

最后，我解决了这个问题。我做了 tr {display：block;}
，然后固定单元格间距。

break仅适用于块级元素。

I am trying to print a large table generated with jQuery in an HTML page. I am using Chrome 26.0.141. The issue is with page break.

i initially used this css

#membersList table { page-break-inside:auto; position:relative}
#membersList tr { page-break-before:avoid; page-break-after:auto;position:relative}
#membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative}
#membersList thead { display:table-header-group;position:relative }
#membersList tfoot { display:table-footer-group;positioion:relative} 

this dint worked so i searched and got this link Google Chrome Printing Page Breaks

based on one of the answer in that link i am using the following CSS attribute

 -webkit-region-break-inside: avoid;

But when I run and inspect the element, it is stroked out by default.

What would be the solution? There are lot of posts I searched. They say that recent versions don't support page break. If it's true then what other solution is there to achieve page break in Google Chrome?

解决方案

Finally I resolved this issue. I made tr{display:block;} and then I fixed the cell spacing.

Page break only works on block level elements.

这篇关于如何在Google Chrome的HTML表格中实现分页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！