讓 Chrome 瀏覽器在列印頁面上重複表頭

問題描述

我想要為每個列印頁面重複我的表的標題，但似乎 Google Chrome 不支援該標籤，有沒有辦法？我正在使用 Google Chrome v13.0.782.215 。

表格程式碼很簡單… 沒有什麼花哨：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="all">
           @page {
              size: landscape;
              margin-top: 0;
              margin-bottom: 1cm;
              margin-left: 0;
              margin-right: 0;
           }
           table {
               border: .02em solid #666; border-collapse:collapse; 
               width:100%; 
           }
           td, th {
               border: .02em solid #666; font-size:12px; line-height: 12px; 
               vertical-align:middle; padding:5px; font-family:"Arial";
           }
           th { text-align:left; font-size:12px; font-weight:bold; }
           h2 { margin-bottom: 0; }
       </style>
   </head>
   <body>
   <h2>Page Title</h2>
   <table>
       <thead>
           <tr class="row1">
               <th><strong>Heading 1</strong></th>
               <th><strong>Heading 2</strong></th>
               <th><strong>Heading 3</strong></th>
               <th><strong>Heading 4</strong></th>
               <th><strong>Heading 5</strong></th>
           </tr>
       </thead>
       <tbody>
           <tr class="row2">
              <td width="30">...</td>
              <td width="30">...</td>
              <td width="90">....</td>
              <td width="190">...</td>
              <td width="420">...</td>
           </tr>
           <tr class="row1">
              <td width="30">...</td>
              <td width="30">...</td>
              <td width="90">....</td>
              <td width="190">...</td>
              <td width="420">...</td>
           </tr>
           ....
       </tbody>
   </table>
   </body>
</html>

對此的任何見解都是值得歡迎的。

最佳解決方案

我相信這是 Chrome 中的 bug 。

次佳解決方案

更新 2017-03-22：重複表頭已經在 Chrome 中實現！ (實際上，我認為這是在一段時間之前實施的) 。這意味著你可能不再需要這個解決方案了只需將列標題放在<thead> 標籤中即可。只有在以下情況下才能使用以下解決方案：a) 在 Chrome 的實現中遇到 show-stopping 錯誤，b) 您需要”bonus features”，或 c) 您需要支援一些仍然不支援重複標頭檔案的奇怪瀏覽器。

解決 (已過時)

下面的程式碼演示了我發現 multi-page 表列印的最佳方法。它具有以下特點：

列標題在每頁上重複
無需擔心紙張尺寸或多少行會適合 – 瀏覽器會自動處理所有內容
分頁僅在行之間發生
單元格邊框總是完全關閉
如果在表頂部附近發生分頁符號，則不會遺漏隱藏的標題或列標題，而不附加任何資料 (問題不僅限於 Chrome)
在 Chrome 中使用！ (和其他 Webkit-based 瀏覽器，如 Safari 和 Opera)

… 以及以下已知的限制：

只支援 1 <thead>(這顯然是你最 allowed to have 的)
不支援<tfoot>(雖然 Chrome-compatible 的執行腳註是 technically possible)
只支援 top-aligned <caption>
表不能有頂或底 margin; 在表格上方或下方新增空格，插入一個空的 div 並在其上設定一個底部邊距
任何影響高度的 CSS 尺寸值 (包括 border-width 和 line-height) 必須在 px
無法透過將寬度值應用於單個表格單元格來設定列寬度; 您應該讓單元格內容自動確定列寬，或者使用<col>s 根據需要設定特定的寬度
在執行 JS 後，表不能 (輕鬆) 動態更改

程式碼

<!DOCTYPE html>
<html>
  <body>
    <table class="print t1"> <!-- Delete "t1" class to remove row numbers. -->
      <caption>Print-Friendly Table</caption>
      <thead>
        <tr>
          <th></th>
          <th>Column Header</th>
          <th>Column Header</th>
          <th>Multi-Line<br/>Column<br/>Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>data</td>
          <td>Multiple<br/>lines of<br/>data</td>
          <td>data</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<style>
  /* THE FOLLOWING CSS IS REQUIRED AND SHOULD NOT BE MODIFIED. */
    div.fauxRow {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      page-break-inside: avoid;
    }
    table.fauxRow {border-spacing: 0;}
    table.fauxRow > tbody > tr > td {
      padding: 0;
      overflow: hidden;
    }
    table.fauxRow > tbody > tr > td > table.print {
      display: inline-table;
      vertical-align: top;
    }
    table.fauxRow > tbody > tr > td > table.print > caption {caption-side: top;}
    .noBreak {
      float: right;
      width: 100%;
      visibility: hidden;
    }
    .noBreak:before, .noBreak:after {
      display: block;
      content: "";
    }
    .noBreak:after {margin-top: -594mm;}
    .noBreak > div {
      display: inline-block;
      vertical-align: top;
      width:100%;
      page-break-inside: avoid;
    }
    table.print > tbody > tr {page-break-inside: avoid;}
    table.print > tbody > .metricsRow > td {border-top: none !important;}

  /* THE FOLLOWING CSS IS REQUIRED, but the values may be adjusted. */
    /* NOTE: All size values that can affect an element's height should use the px unit! */
    table.fauxRow, table.print {
      font-size: 16px;
      line-height: 20px;
    }

  /* THE FOLLOWING CSS IS OPTIONAL. */
    body {counter-reset: t1;} /* Delete to remove row numbers. */
    .noBreak .t1 > tbody > tr > :first-child:before {counter-increment: none;} /* Delete to remove row numbers. */
    .t1 > tbody > tr > :first-child:before { /* Delete to remove row numbers. */
      display: block;
      text-align: right;
      counter-increment: t1 1;
      content: counter(t1);
    }
    table.fauxRow, table.print {
      font-family: Tahoma, Verdana, Georgia; /* Try to use fonts that don't get bigger when printed. */
      margin: 0 auto 0 auto; /* Delete if you don't want table to be centered. */
    }
    table.print {border-spacing: 0;}
    table.print > * > tr > * {
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      padding: 0 5px 0 5px;
    }
    table.print > * > :first-child > * {border-top: 2px solid black;}
    table.print > thead ~ * > :first-child > *, table.print > tbody ~ * > :first-child > * {border-top: none;}
    table.print > * > tr > :first-child {border-left: 2px solid black;}
    table.print > thead {vertical-align: bottom;}
    table.print > thead > .borderRow > th {border-bottom: none;}
    table.print > tbody {vertical-align: top;}
    table.print > caption {font-weight: bold;}
</style>

<script>
  (function() { // THIS FUNCTION IS NOT REQUIRED. It just adds table rows for testing purposes.
    var rowCount = 100
      , tbod = document.querySelector("table.print > tbody")
      , row = tbod.rows[0];
    for(; --rowCount; tbod.appendChild(row.cloneNode(true)));
  })();

  (function() { // THIS FUNCTION IS REQUIRED.
    if(/Firefox|MSIE |Trident/i.test(navigator.userAgent))
      var formatForPrint = function(table) {
        var noBreak = document.createElement("div")
          , noBreakTable = noBreak.appendChild(document.createElement("div")).appendChild(table.cloneNode())
          , tableParent = table.parentNode
          , tableParts = table.children
          , partCount = tableParts.length
          , partNum = 0
          , cell = table.querySelector("tbody > tr > td");
        noBreak.className = "noBreak";
        for(; partNum < partCount; partNum++) {
          if(!/tbody/i.test(tableParts[partNum].tagName))
            noBreakTable.appendChild(tableParts[partNum].cloneNode(true));
        }
        if(cell) {
          noBreakTable.appendChild(cell.parentNode.parentNode.cloneNode()).appendChild(cell.parentNode.cloneNode(true));
          if(!table.tHead) {
            var borderRow = document.createElement("tr");
            borderRow.appendChild(document.createElement("th")).colSpan="1000";
            borderRow.className = "borderRow";
            table.insertBefore(document.createElement("thead"), table.tBodies[0]).appendChild(borderRow);
          }
        }
        tableParent.insertBefore(document.createElement("div"), table).style.paddingTop = ".009px";
        tableParent.insertBefore(noBreak, table);
      };
    else
      var formatForPrint = function(table) {
        var tableParent = table.parentNode
          , cell = table.querySelector("tbody > tr > td");
        if(cell) {
          var topFauxRow = document.createElement("table")
            , fauxRowTable = topFauxRow.insertRow(0).insertCell(0).appendChild(table.cloneNode())
            , colgroup = fauxRowTable.appendChild(document.createElement("colgroup"))
            , headerHider = document.createElement("div")
            , metricsRow = document.createElement("tr")
            , cells = cell.parentNode.cells
            , cellNum = cells.length
            , colCount = 0
            , tbods = table.tBodies
            , tbodCount = tbods.length
            , tbodNum = 0
            , tbod = tbods[0];
          for(; cellNum--; colCount += cells[cellNum].colSpan);
          for(cellNum = colCount; cellNum--; metricsRow.appendChild(document.createElement("td")).style.padding = 0);
          cells = metricsRow.cells;
          tbod.insertBefore(metricsRow, tbod.firstChild);
          for(; ++cellNum < colCount; colgroup.appendChild(document.createElement("col")).style.width = cells[cellNum].offsetWidth + "px");
          var borderWidth = metricsRow.offsetHeight;
          metricsRow.className = "metricsRow";
          borderWidth -= metricsRow.offsetHeight;
          tbod.removeChild(metricsRow);
          tableParent.insertBefore(topFauxRow, table).className = "fauxRow";
          if(table.tHead)
            fauxRowTable.appendChild(table.tHead);
          var fauxRow = topFauxRow.cloneNode(true)
            , fauxRowCell = fauxRow.rows[0].cells[0];
          fauxRowCell.insertBefore(headerHider, fauxRowCell.firstChild).style.marginBottom = -fauxRowTable.offsetHeight - borderWidth + "px";
          if(table.caption)
            fauxRowTable.insertBefore(table.caption, fauxRowTable.firstChild);
          if(tbod.rows[0])
            fauxRowTable.appendChild(tbod.cloneNode()).appendChild(tbod.rows[0]);
          for(; tbodNum < tbodCount; tbodNum++) {
            tbod = tbods[tbodNum];
            rows = tbod.rows;
            for(; rows[0]; tableParent.insertBefore(fauxRow.cloneNode(true), table).rows[0].cells[0].children[1].appendChild(tbod.cloneNode()).appendChild(rows[0]));
          }
          tableParent.removeChild(table);
        }
        else
          tableParent.insertBefore(document.createElement("div"), table).appendChild(table).parentNode.className="fauxRow";
      };
    var tables = document.body.querySelectorAll("table.print")
      , tableNum = tables.length;
    for(; tableNum--; formatForPrint(tables[tableNum]));
  })();
</script>

它如何工作 (如果您不在乎，請不要再進一步瞭解，您需要的一切都在上面。)

Per @ Kingsolmn 的請求，下面是這個解決方案如何工作的解釋。它不涵蓋 JavaScript，這不是嚴格要求的 (儘管它確實使得這種技術更容易使用) 。相反，它專注於生成的 HTML 結構和相關聯的 CSS，這是真正的魔法發生的地方。

這是我們將要使用的表格：



<table>
  <tr><th>ColumnA</th><th>ColumnB</th></tr>
  <tr><td>row1</td><td>row1</td></tr>
  <tr><td>row2</td><td>row2</td></tr>
  <tr><td>row3</td><td>row3</td></tr>
</table>

(為了節省空間，我給它只有 3 個資料行; 顯然，一個多頁表通常會有更多)

我們需要做的第一件事是將表分成一系列較小的表，每個表都有自己的列標題副本。我稱這些較小的表為 fauxRows 。



<table> <!-- fauxRow -->
  <tr><th>ColumnA</th><th>ColumnB</th></tr>
  <tr><td>row1</td><td>row1</td></tr>
</table>

<table> <!-- fauxRow -->
  <tr><th>ColumnA</th><th>ColumnB</th></tr>
  <tr><td>row2</td><td>row2</td></tr>
</table>

<table> <!-- fauxRow -->
  <tr><th>ColumnA</th><th>ColumnB</th></tr>
  <tr><td>row3</td><td>row3</td></tr>
</table>

fauxRows 基本上是原始表的克隆，但只有一個資料行。 (如果你的表格有標題，那麼只有頂級的 fauxRow 應該包括它)

接下來，我們需要使 fauxRows 不可破壞。這意味著什麼？ (注意 – 這可能是分頁處理中最重要的概念。)”Unbreakable” 是用於描述不能在兩個頁面之間分割的內容塊的術語。當在這樣的塊所佔用的空間內發生分頁時，整個塊移動到下一頁。 (請注意，我在這裡非正式地使用了這個詞”block”; 我不是專門指 block level elements) 。這個行為有一個有趣的 side-effect，我們將在以後使用：它可以暴露最初由於分層隱藏的內容或溢位。

我們可以透過應用以下任一 CSS 宣告來使 fauxRows 不可破壞：

page-break-inside: avoid;
display: inline-table;

我通常使用這兩個，因為第一個是為了這個目的，第二個工作在舊/不相容的瀏覽器。在這種情況下，為了簡單起見，我將堅持使用 page-break 屬性。請注意，新增此屬性後，您將看不到表的外觀上的任何更改。



<table style="page-break-inside: avoid;"> <!-- fauxRow -->
      <tr><th>ColumnA</th><th>ColumnB</th></tr>
      <tr><td>row1</td><td>row1</td></tr>
    </table>
    
    <table style="page-break-inside: avoid;"> <!-- fauxRow -->
      <tr><th>ColumnA</th><th>ColumnB</th></tr>
      <tr><td>row2</td><td>row2</td></tr>
    </table>
    
    <table style="page-break-inside: avoid;"> <!-- fauxRow -->
      <tr><th>ColumnA</th><th>ColumnB</th></tr>
      <tr><td>row3</td><td>row3</td></tr>
    </table>

現在 fauxRows 是不可破壞的，如果在資料行中發生分頁符號，它將隨著其附加的標題行一起移動到下一頁。所以下一頁將始終包含頂部的列標題，這是我們的目標。但是表格看起來很奇怪，現在所有額外的標題行。為了使它看起來像一個正常的表，我們需要隱藏額外的標題，只有在需要的時候才會出現。

我們要做的是將每個 fauxRow 放在帶有 overflow: hidden; 的容器元素中，然後將其向上移動，以使頭部被容器頂部剪下。這也將使資料行一起移回，使它們顯示為連續的。

您的第一本能可能是使用容器的 div，但我們將使用父表格的單元格。我會解釋為什麼以後，但現在，我們只需要新增程式碼。 (再次，這不會影響表的外觀。)



table {
  border-spacing: 0;
  line-height: 20px;
}
th, td {
  padding-top: 0;
  padding-bottom: 0;
}
<table> <!-- parent table -->
  <tr>
    <td style="overflow: hidden;">

      <table style="page-break-inside: avoid;"> <!-- fauxRow -->
        <tr><th>ColumnA</th><th>ColumnB</th></tr>
        <tr><td>row1</td><td>row1</td></tr>
      </table>

    </td>
  </tr>
  <tr>
    <td style="overflow: hidden;">

      <table style="page-break-inside: avoid;"> <!-- fauxRow -->
        <tr><th>ColumnA</th><th>ColumnB</th></tr>
        <tr><td>row2</td><td>row2</td></tr>
      </table>

    </td>
  </tr>
  <tr>
    <td style="overflow: hidden;">

      <table style="page-break-inside: avoid;"> <!-- fauxRow -->
        <tr><th>ColumnA</th><th>ColumnB</th></tr>
        <tr><td>row3</td><td>row3</td></tr>
      </table>

    </td>
  </tr>
</table>

請注意表格上方的 CSS 。我新增它有兩個原因：首先，它阻止父表在 fauxRows 之間新增空格; 第二，它使頭部高度可預測，這是必要的，因為我們不使用 JavaScript 動態計算。

現在我們只需要將 fauxRows 向上移動，我們將使用負邊距。但它並不像你想象的那麼簡單。如果我們直接在 fauxRow 中新增了一個負邊距，那麼當 fauxRow 被碰到下一頁時，它將保持有效，導致頁首被頁面頂部剪下。我們需要一種方式來留下負利潤。

為了完成這個，我們將在第一個之後的每個 fauxRow 之上插入一個空的 div，並向其新增負邊距。 (第一個 fauxRow 被跳過，因為它的頭部應該始終是可見的。) 由於邊距在一個單獨的元素上，它不會跟隨到下一個頁面的 fauxRow，並且標題不會被剪下。我稱這些空的 divs headerHiders 。



table {
  border-spacing: 0;
  line-height: 20px;
}
th, td {
  padding-top: 0;
  padding-bottom: 0;
}
<table> <!-- parent table -->
  <tr>
    <td style="overflow: hidden;">

      <table style="page-break-inside: avoid;"> <!-- fauxRow -->
        <tr><th>ColumnA</th><th>ColumnB</th></tr>
        <tr><td>row1</td><td>row1</td></tr>
      </table>

    </td>
  </tr>
  <tr>
    <td style="overflow: hidden;">

      <div style="margin-bottom: -20px;"></div> <!-- headerHider -->

      <table style="page-break-inside: avoid;"> <!-- fauxRow -->
        <tr><th>ColumnA</th><th>ColumnB</th></tr>
        <tr><td>row2</td><td>row2</td></tr>
      </table>

    </td>
  </tr>
  <tr>
    <td style="overflow: hidden;">

      <div style="margin-bottom: -20px;"></div> <!-- headerHider -->

      <table style="page-break-inside: avoid;"> <!-- fauxRow -->
        <tr><th>ColumnA</th><th>ColumnB</th></tr>
        <tr><td>row3</td><td>row3</td></tr>
      </table>

    </td>
  </tr>
</table>

就這樣，我們完成了！在螢幕上，表格現在看起來很正常，頂部只有一列列標題。在列印中，它現在應該有執行標題。

如果您想知道為什麼我們使用父表而不是一堆容器 div，這是因為 Chrome /webkit 有一個錯誤，導致 div-enclosed 不可破壞的塊將其容器運載到下一頁。由於 headerHider 也在容器中，所以它不會像它應該被遺棄，這導致剪輯頭。該錯誤僅在不可破壞的塊是具有 non-zero 高度的 div 中的最高元素時發生。

在編寫本教程時，我發現了一個解決方法：您只需要在 headerHider 上顯式設定 height: 0;，併為其新增一個空值為 1 的 non-zero 高度的子 div 。那麼你可以使用一個 div 容器。然而，我仍然喜歡使用父表，因為它已經被更徹底地測試，並且在某種程度上透過將 fauxRows 回到一個表中來挽回語義。

編輯：我剛剛意識到，JavaScript-generated 標記稍有不同，它將每個 fauxRow 放在一個單獨的容器表中，並將”fauxRow” className 分配給它 (容器) 。這將是頁尾支援所必需的，我打算新增一天，但從未做過。如果我要更新 JS，我可能會考慮切換到 div 容器，因為我使用表的語義合理性不適用。

*有兩種情況，一種不可破壞的塊可以在兩個頁面之間分割：當它超過可列印區域的高度時。你應該儘量避免這種情況; 您本質上要求瀏覽器做出不可能的事情，它可以對輸出產生一些非常奇怪的影響。

第三種解決方案

現在可以使用 jQuery …. 使用 chrome 進行列印。請嘗試使用此程式碼 (我很遺憾，在我修改之前，忘記了誰是這段程式碼的建立者，而我的英文語言不好：D hehehe)

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html>
            <head>
                <title>DOCUMENT TITLE</title>
                <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/>
                <style type="text/css">
                    @media print{
                        table { page-break-after:auto;}
                        tr    { page-break-inside:avoid;}
                        td    { page-break-inside:auto;}
                        thead { display:table-header-group }

                        .row-fluid [class*="span"] {
                          min-height: 20px;
                        }
                    }

                    @page { 
                        margin-top: 1cm;
                        margin-right: 1cm;
                        margin-bottom:2cm;
                        margin-left: 2cm;';
                        size:portrait;
                        /*
                        size:landscape;
                        -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
                        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
                        */

                    };
                </style>
            </head>
            <body>
                <div id="print-header-wrapper">
                    <div class="row-fluid">HEADER TITLE 1</div>
                    <div class="row-fluid">HEADER TITLE 2</div>
                </div>
                <div class="row-fluid" id="print-body-wrapper">
                    <table class="table" id="table_data">
                        <thead>
                            <tr><th>TH 1</th><th>TH 2</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                            <tr><td>TD 1</td><td>TD 2</td></tr>
                        </tbody>
                    </table>
                    <div id="lastDataTable"></div>
                </div>
                <script type="text/javascript">
                    jQuery(document).ready(function()
                    {
                        var printHeader = $('#print-header-wrapper').html();
                        var div_pageBreaker = '<div style="page-break-before:always;"></div>';
                        var per_page = 25;
                        $('#table_data').each(function(index, element)
                        {
                            //how many pages of rows have we got?
                            var pages = Math.ceil($('tbody tr').length / per_page);

                            //if we only have one page no more
                            if (pages == 1) {
                                return;
                            }
                            //get the table we're splutting
                            var table_to_split = $(element);

                            var current_page   = 1;
                            //loop through each of our pages
                            for (current_page = 1; current_page <= pages; current_page++) 
                            {
                                //make a new copy of the table
                                var cloned_table = table_to_split.clone();
                                //remove rows on later pages
                                $('tbody tr', table_to_split).each(function(loop, row_element) {
                                    //if we've reached our max
                                    if (loop >= per_page) {
                                        //get rid of the row
                                        $(row_element).remove();
                                    }
                                });

                                //loop through the other copy
                                $('tbody tr', cloned_table).each(function(loop, row_element) {
                                    //if we are before our current page
                                    if (loop < per_page) {
                                        //remove that one
                                        $(row_element).remove();
                                    }
                                });

                                //insert the other table afdter the copy
                                if (current_page < pages) {
                                    $(div_pageBreaker).appendTo('#lastDataTable');
                                    $(printHeader).appendTo('#lastDataTable');
                                    $(cloned_table).appendTo('#lastDataTable');
                                }

                                //make a break
                                table_to_split = cloned_table;
                            }
                        });
                    });
                </script>
              </body>
            </html>

第四種方案

這是一個在 Webkit，Blink 和 Vivliostyle 中不可用的增強功能，而不是其他更多的「面向列印的格式化程式」(Firefox，IE) 。

您可以檢視 issue for Google Chrome since version 4 here (6 years and 45 versions ago!)，在這裡我們可以感受到它最近有一個擁有者 (2016 年 2 月)，甚至似乎在努力。

有人說 has been also held in the W3，我們可以感謝它的用處：

Since repeating table headers and footers on a fragmentation break is generally a useful thing, I suggest we make a normative requirement and say that UAs must repeat header/footer rows when a table spans a break.

同時，@DoctorDestructo 和 @thefredzx 的 JS 和 Jquery 程式碼對我的使用者來說非常有用，因為使用者不使用 Firefox 或 IE(大多數) 。

第一個需要注意的新版本，包括這個功能，應該注意到這裡，我們許多人會很感激。

參考文獻

Having Google Chrome repeat table headers on printed pages

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

讓 Chrome 瀏覽器在列印頁面上重複表頭