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

Question

我在网页中有一个 table，我需要限制每页 table 中的行数（例如，每个打印页应包含 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

试试这个

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

FIDDLE DEMO

Answer 2

您可以使用 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)，因为这将添加一行。

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

Restrict the number of rows in a table to be printed in a page using CSS

html

css

printing

html-table

page-break