css中page-break-after: always;在火狐浏览器上不执行的解决办法

黄舟 2017-07-08 10:02 4200浏览原创

page-break-after: always;火狐浏览器上不执行


    <meta>
    <title>分页打印</title>
    <object></object>

每页都有的表头
表格内容	表格内容
表格内容	表格内容
表格内容	表格内容
表格内容	表格内容
在这个之后分页	在这个之后分页
表格内容	表格内容
表格内容	表格内容
表格内容	表格内容
表格内容	表格内容
表格内容	表格内容
每页都有的表尾

page-break-after: always;火狐不执行。IE上面却可以。怎么做兼容

谷歌对page-break-after的支持有问题，特别是table，需要将数据拆开，用div来做容器

你可以改成这样的结构，通过打印样式来控制，没有问题。。

nbsp;html>
 
  
    <meta>
    <title>Paginated HTML</title>
    <style>
      div.page{page-break-after: always;page-break-inside: avoid;}
      .hide{display:table-header-group !important}
    </style>
    <style>
      .hide{display:none}
    </style>
  
  
    <div>
<table>
        <thead>
            <tr>
               <td>
                    每页都有的表头
               </td>
           </tr>
        </thead>
        <tbody>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
            <tr>
                <td>在这个之后分页</td>
                <td>在这个之后分页</td>
           </tr>
       </tbody>
       <tfoot>
            <tr>
               <td>
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table>
    </div>
    <div>
      <table>
        <thead>
            <tr>
               <td>
                    每页都有的表头
               </td>
           </tr>
        </thead>
        <tbody>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
           <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
           <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
            <tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
       </tbody>
       <tfoot>
            <tr>
               <td>
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table>
<div>
       <input>
    </div>
    </div>