防止表格行中的打印（或打印預覽）出現分頁

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>