【问题标题】:Prevent page break in print (or print preview) in table row防止表格行中的打印(或打印预览)分页符
【发布时间】:2015-12-10 02:46:15
【问题描述】:

我有这个带有表格的 html 报告,如下所示

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

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

我试过了

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

但这似乎没有帮助。

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

顺便说一下,我使用的是 Chrome 46。

【问题讨论】:

    标签: html css html-table


    【解决方案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>

    【讨论】:

      猜你喜欢
      • 2011-08-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-04
      • 1970-01-01
      • 1970-01-01
      • 2010-11-24
      • 2022-10-05
      相关资源
      最近更新 更多