html – 用于打印的表格行()上的分页符的防d解决方案

概述几天后我们根据需要没有打破桌子.该解决方案适用于Firefox,但从未以更好的方式为我最喜欢的浏览器Chrome工作.到目前为止我们尝试过的是： 我们制作了一个.page-break类,并为不同级别的持有者制作了必要的CSS： @media print{ /* applied to our table */ #report-table { /*-webkit-region-b 几天后我们根据需要没有打破桌子.该解决方案适用于firefox,但从未以更好的方式为我最喜欢的浏览器Chrome工作.到目前为止我们尝试过的是：

我们制作了一个.page-break类,并为不同级别的持有者制作了必要的CSS：

@media print{   /* applIEd to our table */   #report-table {     /*-webkit-region-break-insIDe: auto; //trIEd for Chrome */     page-break-insIDe:auto  }  /* applIEd to all our <tr> */  #report-table tbody tr,#report-table .behave-tbody .behave-tr{     /*-webkit-region-break-insIDe: avoID; //trIEd for Chrome */     page-break-insIDe:avoID;     break-after: auto;     page-break-after: auto;  }  /* page break specific class */  .page-break{     break-after: always;     /*-webkit-region-break-after: always; //trIEd for Chrome */     page-break-after: always;  }}

到目前为止我们已经学习/找到了

>分页符适用于块级元素,例如< h1> < p为H.等等
>分页功能可以在Google Chrome for table CSS中使用

记住它们我们以不同的方式进行：

步骤#1：使用< table>尝试解决方案< TR>

<table ID="report-table">        <thead>        <tr>            <th>head</th>        </tr>        </thead>        <tbody>        <tr>            <td>Body Content</td>        </tr>        <tr >            <td>Body Content</td>        </tr>        <tr>            <td>Body Content</td>        </tr>        </tbody>    </table>

但这在Google Chrome中无效.即使我们已经了解到,<tr> itself is a block-level element.

第二步：绝对制作表格< div>基于

<style>.behave-table{    display: table;    wIDth: 100%;    height: 100%;    position: relative;}.behave-thead{    display: table-header-group;}/* th */.behave-thead .behave-td{    background-color: #ededed;    Font-weight: 700;}.behave-tbody{    display: table-row-group;}.behave-tr{    display: table-row;}.behave-td{    display: table-cell;    padding: 5px;    vertical-align: top;}</style><div ID="report-table" >   <div >      <div >         <div >head</div>      </div> <!-- /.behave-tr -->   </div><!-- /.behave-thead -->   <div >      <div >         <div >Body Content</div>      </div> <!-- /.behave-tr -->      <div >         <div >Body Content</div>      </div> <!-- /.behave-tr -->      <div >         <div >Body Content</div>      </div> <!-- /.behave-tr -->   </div> <!-- /.behave-tbody --></div>

但这在Google Chrome中无效.

步骤#3：在表格单元格中输入块级元素

在the SO thread的指示下,我们在空白表格单元格中尝试了一个块级元素,如下所示：

<tr><td>Body Content</td></tr><tr ><td><h1>Next Section</h1></td></tr><tr><td>Body Content</td></tr>

它部分工作,仅适用于第一页.我们尝试用bootstrap .sr-only类隐藏笨拙的Text块但是它根本不起作用.我们尝试用& nbsp;替换“Next Section”. – 它也不行.

步骤#4：放置< div>使用已知的Block级别elem打破

<tr><td>Body Content</td></tr><div ></div><tr><td>Body Content</td></tr>

但是你知道它不会起作用,因为< div>在表格内只能在表格单元格内工作：

What you need to do is make sure the div is insIDe an actual table cell,a td or th element
– 07002

后果

我们的桌子在Google Chrome中很难破解. 总结

以上是内存溢出为你收集整理的html – 用于打印的表格行()上的分页符的防d解决方案全部内容，希望文章能够帮你解决html – 用于打印的表格行()上的分页符的防d解决方案所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。