分页后显示当前表格标题 css html答案

【问题标题】：Show current table header after pagebreak css html分页后显示当前表格标题 css html
【发布时间】：2012-07-14 00:25:10
【问题描述】：

这是我的问题。它与我在这里看到的一些相似（即CSS: Repeat Table Header after Page Break (Print View)），但有一个区别：多个标题。

如何在动态表中显示分页符（在打印预览模式下）发生的当前表头？

所以，如果这是我的表格，并且分页符出现在第二个标题之后...

<table>
    <tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr>
    <tr><td>Cell 1a</td><td>Cell 2a</td><td>Cell 3a</td></tr>
    <tr><td>Cell 4a</td><td>Cell 5a</td><td>Cell 6a</td></tr>   

    <tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr>
    <tr><td>Cell 1b</td><td>Cell 2b</td><td>Cell 3b</td></tr>

    <!--PAGE BREAK HERE ON PRINT PREVIEW-->
    <tr><td>Cell 4b</td><td>Cell 5b</td><td>Cell 6b</td></tr>
</table>

...我希望能够在分页符后将第二个标题（Head Cells 1b、2b 和 3b）显示为标题。换句话说，我想在分页符发生后显示相应的标题，无论它发生在哪里。所以上表在分页后应该是这个样子...

<table>
    <tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr>
    <tr><td>Cell 1a</td><td>Cell 2a</td><td>Cell 3a</td></tr>
    <tr><td>Cell 4a</td><td>Cell 5a</td><td>Cell 6a</td></tr>   

    <tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr>
    <tr><td>Cell 1b</td><td>Cell 2b</td><td>Cell 3b</td></tr>

    <!--PAGE BREAK HERE ON PRINT PREVIEW-->
    <tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr>
    <tr><td>Cell 4b</td><td>Cell 5b</td><td>Cell 6b</td></tr>
</table>

我尝试将标题包装在 <thead> 标签中，然后将我的 css 设置为：

table, tr{page-break-after:auto;} 
thead {display:table-header-group;}

但第一个标题在每一页上不断重复，所以我看到的是：

<table>
    <thead><tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr></thead>
    <tr><td>Cell 1a</td><td>Cell 2a</td><td>Cell 3a</td></tr>
    <tr><td>Cell 4a</td><td>Cell 5a</td><td>Cell 6a</td></tr>   

    <thead><tr><th>Head Cell 1b</th><th>Head Cell 2b</th><th>Head Cell 3b</th></tr></thead>
    <tr><td>Cell 1b</td><td>Cell 2b</td><td>Cell 3b</td></tr>

    <!--PAGE BREAK HERE ON PRINT PREVIEW-->
    <thead><tr><th>Head Cell 1a</th><th>Head Cell 2a</th><th>Head Cell 3a</th></tr></thead>
    <tr><td>Cell 4b</td><td>Cell 5b</td><td>Cell 6b</td></tr>
</table>

如果有人可以帮助解决这个问题，请尽快告诉我。我真的很感激！

提前致谢！

【问题讨论】：

标签： php jquery html css print-preview

【解决方案1】：

首先，一个表中不能有多个<thead> 标签。所以我必须做的是让每个部分都成为一个带有它自己的<thead> 的actaul 表。现在分页符后会显示正确的标题。

【讨论】：