Html 是否通过css为每个页面设置默认标题？

我正在和我的项目一起打印一些文档。在那里，我遇到了一些问题，为每个打印页面设置标题！我想打印包含如此多

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>

桌子{
边框：1px实心#eee；
宽度：100%；
颜色：绿色；
}
th，td{
边框：1px纯红；
宽度：50px；
高度：50px；
}
@媒体印刷品{
正文*{可见性：隐藏；}
#可打印*{可见性：可见；}
#可打印的th{
排名：0；
}
}
打印示例
名称
薪水
电话
大卫
3828
83939
琼斯
39393
0202022
史密斯
39000383929
0101010101
希伊
3483939
111111
大卫
3828
83939
大卫
3828
83939
大卫
3828
83939
大卫
3828
83939
琼斯
39393
0202022
史密斯
39000383929
0101010101
琼斯
39393
0202022
史密斯
39000383929
0101010101
琼斯
39393
0202022
史密斯
39000383929
0101010101
琼斯
39393
0202022
史密斯
39000383929
0101010101
琼斯
39393
0202022
史密斯
39000383929
0101010101

在这里，我还希望打印时将AD添加到第2页（在Chrome上运行）

---

这也应该起作用

您需要在AD上设置一些打印样式：

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

---

大多数浏览器都会重复

和

，包括最新的chrome浏览器

仍然有办法让thead重复如下

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

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

---

此css代码应该可以

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

毫无疑问。稍微修改，添加了第二个

页脚框标题

元素，并使用div而不是table元素进行求解

<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>

---

简短回答的可能重复之处在于大多数浏览器仍然不支持在后续页面上重复

。从对另一个问题的评论来看，Firefox和IE已经实现了它。@谢谢你的评论，我发现Firefox是按照你说的那样工作的。我的测试浏览器是chrome，所以不工作！！！：）对我来说，在chrome

75.0.3770.142

中，操作码工作正常吗？这对我也有用，你应该检查这个答案@David Jaw Hpan如果这有帮助，请接受答案。

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

<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;
}