CSS在打印时将表行保持在一起

Question

我有一个通过循环生成的表 每个循环创建两行表。

我想要实现的是当打印此页面时，在每个循环迭代中创建的2行保持在一起并且不会在页面边界上分割。

我已尝试在{page-break-inside: avoid;}和tr元素上应用CSS规则td而运气不佳（我听说这是非块元素的已知问题）。<登记/> 除了使用div重建视图外，是否有可以应用于表的解决方案？

Answer 1

您需要将这两种样式组合在一起（尽管auto是默认值）

如果这两行应该连在一起，你可以考虑为这两行中的每一行使用一个表，而不是为所有行都有一个表。

{page-break-inside: avoid;page-break-before:auto}

同时检查this answer

的评论

Answer 2

不幸的是，CSS分页符属性在所有浏览器和平台上并不总是可靠的。

对于一种更可靠的方法，如AaA所述，我发现最好将不需要分割的行包装到自己的表中。

像这样：

<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

每个表可以根据需要更可靠地保持在一起，并且该表可以具有所需的行和列。