避免在表格的行内换页
避免在表格的行内换页
提问于 2012-02-15 14:22:18
当我用wkhtmltopdf将html转换成PDF时，我想避免在html表格的行内换页。我使用page-break-inside:避免使用表格-它是有效的，但我有这么多行，然后就不工作了。如果将tr的显示设置为block或其他值，则会更改表的格式并插入双边框。或者，可以在表格被拆分的每一页上插入表格标题。
回答 10
Stack Overflow用户
回答已采纳
发布于 2012-08-09 07:00:29
您可以尝试使用CSS：
<table class="print-friendly">
<!-- The rest of your table here -->
</table>
<style>
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
</style>大多数CSS规则并不直接应用于<tr>标签，因为正如你上面所指出的--它们有一个独特的display样式，这不允许这些CSS规则。然而，它们里面的<td>和<th>标签通常do允许这种类型的规范-而且你可以很容易地应用这样的规则到所有子-<tr>和<td>的使用CSS，如上所示。
Stack Overflow用户
发布于 2013-08-01 06:30:07
我发现在webkit浏览器中处理这个问题的最好方法是在每个td元素中放置一个div，并将page-break- inside :避免样式应用到div中，如下所示：
...
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>尽管Chrome可能无法识别“page - break -inside:avoid；”属性，但在使用wktohtml生成PDF时，这似乎可以防止行内容被分页符一分为二。tr元素可能会在分页符上挂起一点，但div和其中的任何内容都不会。
Stack Overflow用户
发布于 2015-07-14 21:42:09
我使用了上面的@AaronHill (link)的4px技巧，它真的很有效！我使用了一个更简单的css规则，不需要向表中的每个<td>添加一个类。
@media print {
table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9288802
复制相关文章
相似问题