Table headers 使用 wkhtmltopdf 转换为 PDF 时，第二页内容重叠

Question

我有一个跨越多个页面的 table。 thead 在第二页上重复出现并与内容重叠。

我正在使用 bootstrap 并确保在我的页面中实现了来自其他 wkhtmltopdf 重叠解决方案的 css。

thead { display: table-header-group; }
tfoot { display: table-row-group; }
tr { page-break-inside: avoid; }

table, tr, td, th, tbody, thead, tfoot, td div {
    page-break-inside: avoid !important;
}

Answer 1

table 包裹在 <div class="table-responsive"> 中。这是导致问题的原因。

我添加了以下 CSS 以更改在 table-responsive div

上处理 overflow-x 的方式

.table-responsive { overflow-x: visible !important; }

这解决了我的问题。

基思

Answer 2

这对我有用。在这个 table:

<table class="webgrid-table">
 <thead>
  <tr>
   //your code
  </tr>
 </thead>
</table>

仅添加这些 css class:

.webgrid-table thead {
    display: table-header-group;
}

.webgrid-table tfoot {
    display: table-row-group;
}

.webgrid-table tr {
    page-break-inside: avoid;
}

Table headers 使用 wkhtmltopdf 转换为 PDF 时，第二页内容重叠

Table headers overlapping content on second page when converting to PDF with wkhtmltopdf

wkhtmltopdf

twitter-bootstrap-3