Prevent page break in print (or print preview) in table row

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/34182545/prevent-page-break-in-print-or-print-preview-in-table-row