打印时Html表拆分行

Question

我目前正在尝试打印的表有一些问题，如果它有多个页面，在分页处，那里的表行将被裁剪。我已经尝试过使用table { page-break-inside:auto }和tr { page-break-inside:avoid; page-break-after:auto }，但两者都不起作用。

这可能与我的css有冲突？

这里有个小摆设：Jsfiddle链接

Answer 1

将CSS更改为

 @media print {

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

同时移除所有额外的

<tbody>...</tbody>

，你应该只有一个

<tbody></tbody>

两者之间的关系。

这应该对你有用。

参考文献：https://www.w3.org/TR/css-print/