飞碟:rowspan 和 page-break-inside
Flying saucer: rowspan and page-break-inside
我正在使用飞碟将 html 页面转换为 PDF。 table 的整个部分有两个巨大的列。所有列都有
table td {
border: 1px solid black;
page-break-inside: avoid;
vertical-align: middle;
}
已应用样式。因此,对于其他每一列,这都可以正常工作,并且它们被正确截断了。虽然 rowspanned 列不会在每个页面上停在相同的高度(参见屏幕截图)
有什么解决方法的建议吗?
一种可能的解决方法是根本不使用行跨度,而是隐藏第三列中单元格的边框。所以:
- 从单元格中删除行跨度;
- 包括
<td></td>
甚至对于应该分组的单元格;
- 添加以下样式:
``
tr:nth-child(n+5) td:nth-child(n+3) {
border-top: none;
}
tr:not(:last-child) td:nth-child(n+3) {
border-bottom: none;
}
在第一个语句中,n+5
表示从第 5 行开始隐藏边框,因此只有前 4 行会保留边框。如果您更习惯,您可能会想到其他类型的选择器。
注意:我不知道上面的规则是否适用于飞碟,它们至少在 Chrome print window 中有效,这基本上是 html 到 pdf转换器。试试吧。
我正在使用飞碟将 html 页面转换为 PDF。 table 的整个部分有两个巨大的列。所有列都有
table td {
border: 1px solid black;
page-break-inside: avoid;
vertical-align: middle;
}
已应用样式。因此,对于其他每一列,这都可以正常工作,并且它们被正确截断了。虽然 rowspanned 列不会在每个页面上停在相同的高度(参见屏幕截图)
有什么解决方法的建议吗?
一种可能的解决方法是根本不使用行跨度,而是隐藏第三列中单元格的边框。所以:
- 从单元格中删除行跨度;
- 包括
<td></td>
甚至对于应该分组的单元格; - 添加以下样式:
``
tr:nth-child(n+5) td:nth-child(n+3) {
border-top: none;
}
tr:not(:last-child) td:nth-child(n+3) {
border-bottom: none;
}
在第一个语句中,n+5
表示从第 5 行开始隐藏边框,因此只有前 4 行会保留边框。如果您更习惯,您可能会想到其他类型的选择器。
注意:我不知道上面的规则是否适用于飞碟,它们至少在 Chrome print window 中有效,这基本上是 html 到 pdf转换器。试试吧。