Question

我在网页中有一个表格，我需要限制每页表格中的行数（例如，每个打印页面应包含10行）（仅在打印页面中）。

我的代码是这样的：

<style>
@media print {
   thead {display: table-header-group;}
}
</style>
<table>
   <thead>
      <tr>
         <th>First Heading</th>
         <th>Second Heading</th>
         <th>Third Heading</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>foo</td>
         <td>bar</td>
         <td>21</td>
      </tr>
            ....
            ....
</tbody>
</table>

我想知道，有没有办法用CSS或同等方式做到这一点？另外我在第3行有一个整数值，我需要打印每页中这些行的总和（比如，页面末尾每页10行的总和）。

请建议我实现这一目标的一些想法。所有这些只能在打印页面中完成，而不是在浏览器显示中。

Answer 1

您可以使用nth-child()选择器：

@media print {
  tr:nth-of-type(10n){
    page-break-after: always;
  }
}

这在Chrome中不起作用，因为Chrome要求分页符元素必须是块级元素。

目前无法使用纯CSS对列的内容求和，您必须使用一些javascript或服务器端处理。
例如：

  jQuery(document).ready(function(){
    x=0;
    i=0;
    items=jQuery( "tbody tr" ).length;
    jQuery( "tbody tr" ).each(function(index) {
      i++;
      x = x + parseInt(jQuery("td:last-of-type",this).text());
      if (i==10 || items == index+1){
        jQuery('<tr><td colspan="2">Total:</td><td>' + x + '</td></tr>').insertAfter(this);
        x=0;
        i=0;
      }
    });
  });

然后，您必须将tr:nth-of-type(10n)增加到tr:nth-of-type(11n)，因为这会添加一行。

Answer 2

试试这个

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

FIDDLE DEMO

使用CSS限制要在页面中打印的表中的行数

2 个答案: