防止表格行中的打印(或打印预览)出现分页 [英] Prevent page break in print (or print preview) in table row

问题描述

我有此html报告，其中包含一个表格，如下所示

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

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

我尝试过

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

但是这似乎没有帮助.

我怎样才能做到在打印时不会在行中间出现分页符?

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

解决方案

根据您的用户界面，在我看来，在这种情况下不要使用表格，而是使用无序列表并浮动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> 

I have this html report with a table as shown here

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

And here's the print preview that shows how it's breaking in the middle of a table row.

I have tried

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

but that didn't seem to help.

How can I make it so just in print the page break does not occur in the middle of the row?

I am using Chrome 46, by the way.

解决方案

It seems to make sense to me, based on your UI, to not use a table in this instance and to use an unordered list instead and float the li's.

That being said, you could then unfloat the li's for print and return the document to a normal print layout (top to bottom) and remove any of the styling that is unnecessary for print.

Try printing this page: http://jsfiddle.net/zensign/qko3nr81/embedded/result/

Check out this snippet for code reference:

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

这篇关于防止表格行中的打印(或打印预览)出现分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！