几天后我们根据需要没有打破桌子.该解决方案适用于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 class="page-break">
<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" class="behave-table">
<div class="behave-thead">
<div class="behave-tr">
<div class="behave-td">Head</div>
</div> <!-- /.behave-tr -->
</div><!-- /.behave-thead -->
<div class="behave-tbody">
<div class="behave-tr">
<div class="behave-td">Body Content</div>
</div> <!-- /.behave-tr -->
<div class="behave-tr page-break">
<div class="behave-td">Body Content</div>
</div> <!-- /.behave-tr -->
<div class="behave-tr">
<div class="behave-td">Body Content</div>
</div> <!-- /.behave-tr -->
</div> <!-- /.behave-tbody -->
</div>
但这在Google Chrome中无效.
步骤#3：在表格单元格中输入块级元素
在the SO thread的指示下,我们在空白表格单元格中尝试了一个块级元素,如下所示：
<tr><td>Body Content</td></tr> <tr style="page-break-after: always"><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 class="page-break"></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中很难破解.
