Html table 打印时断行

Question

我目前在尝试打印 table 时遇到一些问题，如果它不止一页，在分页符处，table 行是裁剪。我已经尝试使用 table { page-break-inside:auto } 和 tr { page-break-inside:avoid; page-break-after:auto }，但都没有用。

可能和我的有冲突css?

这是它的 Jsfiddle：Jsfiddle link

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>

以及两者之间的所有 tr。

应该适合你。

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

Html table 打印时断行

Html table breaking row when printing

html

css

printing

css-tables