防止表格行中的打印（或打印预览）出现分页

Question

我有这个html报告，带有一个表格，如下所示

http://jsfiddle.net/fhwoo3rg/2/embedded/result/

这是打印预览，显示了它如何在表格行的中间断开。

我努力了

@media print    
{
  tr
  {
    position:relative;
    page-break-inside:avoid;page-break-after:auto;
  }
}

但这似乎没有帮助。

我如何才能做到仅在打印时在行中间不会出现分页符？

顺便说一下，我正在使用Chrome 46。

Answer 1

根据您的用户界面，在我看来，在这种情况下不要使用表，而是使用无序列表，然后浮动li的表，这对我来说似乎很有意义。

话虽这么说，然后您可以浮动li进行打印，然后将文档恢复为正常的打印布局（从上到下），并删除任何不需要打印的样式。

尝试打印此页面： http : //jsfiddle.net/zensign/qko3nr81/embedded/result/

查看此代码段以获取代码参考：

 @media screen { ul { margin: 0; padding: 0; list-style: none; } li { display: block; width: 200px; height: 150px; border: 1px solid #000; padding: 5px 10px; float: left; position: relative; margin: 5px; } } .myGroup { border: 1px solid grey; width: 90%; padding: 1px; text-align: center; position: absolute; bottom: 10px; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999)); background-image: -webkit-linear-gradient(top, #fff, #999); background-image: -moz-linear-gradient(top, #fff, #999); background-image: -o-linear-gradient(top, #fff, #999); background-image: linear-gradient(to bottom, #fff, #999); } @media print { ul { list-style: normal; } li { float: none !important; border: none; } .myGroup { border: none; position: relative !important; bottom: 0; display: inline; width: auto; } } 

 <ul> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> <li> <p> <strong>Test text</strong> </p> <p>Test description</p> <div class="myGroup">Test Group</div> </li> </ul>