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

时间:2014-09-26 14:42:54

标签: html css

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

同时检查this answer

的评论

答案 1 :(得分:0)

不幸的是,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

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