HTML表格在打印时中断行 [英] Html table breaking row when printing

问题描述

我当前要打印的表格存在一些问题，如果该表格有一页以上，则在分页符上，其中的表格行已被裁剪。我已经尝试使用 table {page-break-inside：auto} 和 tr {page-break-inside：avoid; page-break-after：auto} ，但均无效。

I'm currently having some issues with a table I'm trying to print, if it has more than one page, on the page break, the table row in there is being cropped. I've already tried using table { page-break-inside:auto } and tr { page-break-inside:avoid; page-break-after:auto }, but neither worked.

可能与我的CSS冲突？

It may be something in conflict with my css?

这是Jsfiddle： Jsfiddle链接

Here's the Jsfiddle with it: Jsfiddle link

推荐答案

将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>

及其之间的所有tr。

and all tr between that.

应该适合您的。

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

这篇关于HTML表格在打印时中断行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！