在每个页面的顶部为长打印表设置镀铬表头 [英] Make chrome put table header at the top of each page for long printed table

问题描述

我有一个很长的表，打印时，跨越几页。

I have a really long table that when printed, spans several pages.

目前，当打印表，标题行只出现在

Currently, when printing the table, the header row only appears at the very top of the table and not at the top of each page.

如何使浏览器（特别是chrome）在每个打印页面的顶部打印一个粘性表格标题？

How can I make the browser (specifically chrome) print a "sticky" table header at the top of every printed page?

我的html：

<table>
  <!--header-->
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td>Col 4</td>
  </tr>

  <!--body-->
  <tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  . . . . . .
  <tr>
    <td>Row nth</td>
    <td>Row nth</td>
    <td>Row nth</td>
    <td>Row nth</td>
  </tr>
</table>

推荐答案

使用下面的html中的< thead> 和< tbody> 标记。有了这些元素，我知道的每个主要浏览器都知道如何自动处理分页符：

To make this work properly, just make sure you are using the <thead> and <tbody> tags in your html like the below. With those elements in place, every major browser I know of will know how to handle the page breaks automatically:

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>

    ....

  </tbody>
</table>

这篇关于在每个页面的顶部为长打印表设置镀铬表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！