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

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/

查看此 sn-p 以获取代码参考：

@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>