Lösung für Seitenumbruch nach: immer; in CSS wird im Firefox-Browser nicht ausgeführt-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Lösung für Seitenumbruch nach: immer; in CSS wird im Firefox-Browser nicht ausgeführt

Jul 08, 2017 am 10:02 AM

firefox webkit

Seitenumbruch nach: immer;Wird in Firefox nicht ausgeführt.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>分页打印</title>
</head>

<body>
    <object id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 ></object>
    <table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="display:table-header-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double red">
                    每页都有的表头
               </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 style=" page-break-after : always;">
                <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>
            <tr><td>表格内容</td><td>表格内容</td></tr>
       </tbody>
       <tfoot style="display:table-footer-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table>
  <div align="center">
       <input type="button" value="打    印" onclick="javascript:window.print()" />
    </div>
</body>
</html>

Nach dem Login kopieren

Seitenumbruch nach: immer; Wird in Firefox nicht ausgeführt. Aber es funktioniert im IE. So machen Sie es kompatibel

Lösung für Seitenumbruch nach: immer; in CSS wird im Firefox-Browser nicht ausgeführt

Es gibt ein Problem mit der Unterstützung von Google für den Seitenumbruch danach, insbesondere bei Tabellen, bei denen die Daten aufgeteilt und Divs als Container verwendet werden müssen

Sie können es problemlos in eine solche Struktur ändern und über Druckstile steuern. .

<!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page{page-break-after: always;page-break-inside: avoid;}
      .hide{display:table-header-group !important}
    </style>
    <style type="text/css">
      .hide{display:none}
    </style>
  </head>
  <body>
    <div class="page"><table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="display:table-header-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double red">
                    每页都有的表头
               </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 style="font-weight:bold" class="hide">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table>
    </div>
    <div class="page">
      <table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="font-weight:bold" class="hide">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double red">
                    每页都有的表头
               </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 style="display:table-footer-group; font-weight:bold">
            <tr>
               <td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
                  每页都有的表尾
               </td>
           </tr>
        </tfoot>
    </table><div align="center">
       <input type="button" value="打    印" onclick="javascript:window.print()" />
    </div>
    </div>

  </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonLösung für Seitenumbruch nach: immer; in CSS wird im Firefox-Browser nicht ausgeführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn