第 2 页上的 Firefox 打印表答案

【问题标题】：Firefox printing table on 2nd page第 2 页上的 Firefox 打印表
【发布时间】：2014-01-15 15:03:10
【问题描述】：

我的页面顶部有一个小标题，然后是一个包含大量动态数据的表格。

打印时，数据有时会恰好落在分页符的边缘。举个例子。

如果表格中有 19 行或更少的行，它将全部打印在一页上。
如果有 20 或 21 行，它将把整个表格扔到第二页。
如果表格中有 22 行或更多行，它将在第一页打印 20，在第二页打印 2

我不介意第一种或第三种情况，但我不在乎第二种情况。我意识到这是我的强迫症，但似乎有人会知道解决方法。

这似乎只发生在 Firefox 中。在 Chrome 中，表格将始终拆分，大约在 18 行之后。 IE10 似乎也总是拆分，也是 18 行。

我已经尝试了以下所有可能的变体：

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

我正在使用 bootstrap3，如果这有影响的话。

注意：您可以通过更改打印缩放将其全部打印在一页上，但我不能指望我的用户这样做。

注意：我确实意识到我可以做一个 hack，比如检查有多少行，如果它落在错误的范围内，则在页面的某处添加或删除一些填充。但我宁愿以正确的方式做，假设有一个。

更新：我发现只有在 Firefox 处于 100% 缩放设置时才会发生这种情况。当您将其设置为“Shrink To Fit”时，它的行为与其他浏览器一样。 IE10，即使缩放设置为 100% 也能正常运行。

【问题讨论】：

标签： html css firefox twitter-bootstrap printing

【解决方案1】：

您可以尝试添加 css： table {page-break-before: avoid;}

【讨论】：

【解决方案2】：

您可以将 tr 放在标签内，但由于 div 不支持 tr，因此您必须像这样构建表格结构

替换

<table>
<tr >

            <td class="fixture-table-header">Location Name</td>
            <td class="fixture-table-header">Fixture Type</td>
            <td class="fixture-table-header">Fixture Photo</td>
            <td class="fixture-table-header">Qty</td>
            <td class="fixture-table-header">Input Watts</td>
            <td class="fixture-table-header">Annual Hours</td>
            <td class="fixture-table-header">kW</td>
            <td class="fixture-table-header">Annual kWh</td>
            <td class="fixture-table-header">Total Utility Incentive Avaiable</td>
            <td class="fixture-table-header">Total Proposed Cost</td>
     </tr>
</table>

与

<table >        
    <tr>
    <td><div><table><tr style="page-break-inside : avoid">

            <td class="fixture-table-header">Location Name</td>
            <td class="fixture-table-header">Fixture Type</td>
            <td class="fixture-table-header">Fixture Photo</td>
            <td class="fixture-table-header">Qty</td>
            <td class="fixture-table-header">Input Watts</td>
            <td class="fixture-table-header">Annual Hours</td>
            <td class="fixture-table-header">kW</td>
            <td class="fixture-table-header">Annual kWh</td>
            <td class="fixture-table-header">Total Utility Incentive Avaiable</td>
            <td class="fixture-table-header">Total Proposed Cost</td>
     </tr></table></div></td>
</tr>
</table>

然后添加这个 css

@media print
{
       @page {size: landscape}  //optional  
      table { page-break-after:auto }//optional      
      div    { page-break-inside:avoid; page-break-after:auto }

}

【讨论】：