我有一个通过循环生成的表。每个循环创建表的2行。我想要实现的是,当打印此页面时,在每个循环迭代中创建的2行保持在一起,并且不会在页面边界上拆分。我尝试过在tr和td元素上应用CSS规则{page-break-inside: avoid;},但运气不太好(我听说这是非块元素的一个已知问题)。除了使用div重新构建视图之外,是否有可以应用于表的解决方案?
tr
td
{page-break-inside: avoid;}
bmp9r5qi1#
您需要将这两种样式组合在一起(尽管默认值为auto)如果这两行应该连接在一起,您可以考虑为这两行中的每一行使用一个表,而不是为所有行使用一个表。
{page-break-inside: avoid;page-break-before:auto}
另请检查this answer的注解
l3zydbqr2#
page-break-inside: avoid; page-break-before: auto样式的发现对我来说非常有用,因为我正在寻找一种方法来实现这一点。然而,我发现了一种方法,可以使它在不使用单独表格的情况下工作。将您希望保持在一起的每一组行都 Package 在<tbody>元素中,并为该元素提供控制分页符的两种样式。据我所知,这正好达到了预期的效果:如果打印的文档被拆分为多个页面,则每个<tbody>元素中的行将始终显示在同一页面上。
page-break-inside: avoid; page-break-before: auto
<tbody>
pobjuy323#
不幸的是,CSS分页符属性在所有浏览器和平台上并不总是可靠的。正如AaA所提到的,对于一种更可靠的方法,我发现最好将不希望拆分的行 Package 到它们自己的表中。就像这样:
<table> <thead> //headers </thead> <tbody> <tr> //Create your for loop on this element <td> <table> <tbody> <tr> <td>Row 1</td> </tr> <tr> <td>Row 2</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
每个表可以根据需要更可靠地保持在一起,并且表可以具有所需的任意多的行和列。
3条答案
按热度按时间bmp9r5qi1#
您需要将这两种样式组合在一起(尽管默认值为auto)
如果这两行应该连接在一起,您可以考虑为这两行中的每一行使用一个表,而不是为所有行使用一个表。
另请检查this answer的注解
l3zydbqr2#
page-break-inside: avoid; page-break-before: auto
样式的发现对我来说非常有用,因为我正在寻找一种方法来实现这一点。然而,我发现了一种方法,可以使它在不使用单独表格的情况下工作。将您希望保持在一起的每一组行都 Package 在<tbody>
元素中,并为该元素提供控制分页符的两种样式。据我所知,这正好达到了预期的效果:如果打印的文档被拆分为多个页面,则每个<tbody>
元素中的行将始终显示在同一页面上。pobjuy323#
不幸的是,CSS分页符属性在所有浏览器和平台上并不总是可靠的。
正如AaA所提到的,对于一种更可靠的方法,我发现最好将不希望拆分的行 Package 到它们自己的表中。
就像这样:
每个表可以根据需要更可靠地保持在一起,并且表可以具有所需的任意多的行和列。