两个大问题;
长表格
生成的 PDF 在分页处如下的效果
表头重复, 字体重叠
很明显可以看到表头重复出现了. 其实实际的问题不止如此, 如果单元格很宽导致换行, 很大概率会和重复显示的表头重叠.
解决方案:
thead {
display: table-row-group;
}
结果:
表头不重复, 字体不重叠, 但表格的一行被切成了两部分。
再次解决
tr {
page-break-before: always;page-break-after: always;page-break-inside: avoid;
}
结果:
宽表格
宽表格不加特殊处理,得到的表格右侧被截断。这是因为默认的样式中并没有设置。
table {
word-wrap: break-word;
}
实际情况单元格宽度总会有长有短,当同一列中存在一个很长的单词或者是很长的连起来的无意义的字符串,该列单元格的最短列宽就会以它为准,这样导致表格的总宽度很容易超出页面限制。因为word-wrap 控制的是有多个单词的情况, 如果只有一个单词,它是不做处理的。所以我们需要另外加一个样式
table td {
word-break: break-all;
}