通过css为每个页面设置默认标题？答案

【问题标题】：Set default header for each page by css?通过css为每个页面设置默认标题？
【发布时间】：2016-03-22 08:02:37
【问题描述】：

我正在使用我的项目打印一些文档。我在每个打印页面的设置标题中遇到了一些问题！我想打印有这么多tr的html表格，打印时它分为两页。因此，我想将thead设置为每个打印页面的标题元素。所以帮帮我！！

<style type="text/css">
table {
  border: 1px solid #eee;
  width: 100%;
  color : green;
}
th,td {
    border: 1px solid red;
    width: 50px;
    height: 50px;
}
@media print {
body * {visibility: hidden;}
#printable * {visibility: visible;}
#printable th {

    top: 0;
}
}
</style>
<div id="printable">
<span><center>Print Example</center></span>
<table>
    <thead>
        <tr><th>Name</th>
            <th>Salary</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr>
        <tr><td>Sheee</td>
            <td>3483939</td>
            <td>111111</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr>
    </tbody>
 </table>
</div>

这里我也希望thead 打印到第 2 页。（在 Chrome 上运行）

【问题讨论】：

CSS: Repeat table headers in print mode的可能重复
简短的回答是大多数浏览器仍然不支持在后续页面上重复 <thead>。从另一个问题的cmets来看，Firefox和IE已经实现了。
@andyb 感谢您的 cmets，我发现 firefox 可以按您说的那样工作。我的测试浏览器是 chrome，所以不工作！！！ :)
对于我在 chrome 75.0.3770.142 中，OP 代码可以正常工作吗？ i.stack.imgur.com/iCfuj.png
它也对我有用，你应该检查这个答案stackoverflow.com/questions/274149/…

标签： html css printing

【解决方案1】：

大多数浏览器都会重复 <thead> 和 <tfoot>，包括 chrome 最新的浏览器。

仍然有办法让主题重复如下。

<thead class="report-header">
   <tr>
      <th>
         <div class="header-info">
         ...
         </div>
      </th>
   </tr>
</thead>

你需要提供类似的css：

@media print {
thead.report-header {
   display: table-header-group;
}
}

您可以在下面的链接中找到详细说明。

repeat header

【讨论】：

@David Jaw Hpan 如果这有帮助，请您接受答案。

【解决方案2】：

 table {
            -fs-table-paginate: paginate;
        }

https://code.google.com/archive/p/flying-saucer/

这应该也可以

【讨论】：

【解决方案3】：

您需要在广告上添加一些印刷样式：

@media print {
    /* Repeat header row at top of each printed page */
    thead {
        display: table-header-group;
    }
}

【讨论】：

【解决方案4】：

这个css代码应该做的

@media print {
    /* Repeat header row at top of each printed page */
    thead {
        display: table-header-group;
    }
}

【讨论】：

【解决方案5】：

来自this 的问题。稍作修改，添加了第二个footer-box caption 元素，并使用 div 而非表格元素解决。

<div class="footer">
    <div class="footer-title-box">
        <div class="footer-box">Title</div>
        <div class="footer-box caption">Title</div>
        <div class="footer-box caption">Title</div>
    </div>
    <div class="footer-row-box">
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
    </div>
    <div class="footer-row-box">
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
    </div>
    <div class="footer-row-box">
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
    </div>
</div>

.footer {
    display: table;
    width:50%;
    table-layout: fixed;
}
.footer-title-box {
    display: table-header-group;
    font-weight: bold;
}

.footer-row-box {
    display: table-row-group;
}
.footer-box {
    display: table-cell;
    text-align: center;
}

【讨论】：