7

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

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

  • 如果表格中有 19 行或更少的行，它将全部打印在 1 页上。
  • 如果有 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% 也能正常运行。

4

2 回答 2

0

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

于 2013-10-03T21:26:25.640 回答
0

您可以将您的 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 }

}
于 2014-01-13T09:08:22.447 回答