Question

我正在使用我的项目来打印一些文档。我在每个打印页面的set header中遇到了一些问题！我想要打印出那么多tr的html表，打印时将其分为两页。因此，我想将thead设置为每个打印页面的标题元素。所以请帮助我!! / p>

<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上运行）

Answer 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

Answer 2

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

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

这也应该起作用

Answer 3

你需要在thead上使用一些打印样式：

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

Answer 4

此CSS代码应执行的操作

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

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

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

5 个答案: