Question

我有一张包含<thead>，<tfoot>和<tbody>的表格。它应该在理论上打印每页上的thead和tfoot，但由于某种原因，如果它包含某些元素，那么它就不会。

这有效：

<thead>
    <tr>
        <td colspan="3">This works</td>
    <tr>
    <tr>
        <th colspan="2">column 1</th>
    <th>
        column 2
        </th>
</tr>
</thead>

这似乎不起作用：

[编辑]

<table>
    <thead>
        <tr>
            <td colspan="3">
                <h2>Header</h2>
                    <address>
                        <strong>address 1</strong> <br />
                        address 2 <br />
                        address 3 <br />
                    </address>
                 <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Wikipedia-logo.svg/600px-Wikipedia-logo.svg.png" alt="Logo" />
                 <h2>Another header</h2>
                 <hr />
            </td>
        </tr>
        <tr>
            <th colspan="2">column 1</th>
        <th>
            column 2
            </th>
    </tr>
    </thead>
    <tfoot>
        <tr>
            <td>This is the footer</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
    </tfoot>
    <tbody>
        <?php for ($i = 0; $i < 100; $i ++): ?>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
        </tr>
        <?php endfor; ?>
    </tbody>
</table>

[/编辑]

打印：

[page 1]
    [header]
    [body]
    [footer]

[page 2,3,4,5]
    [body]
    [footer]

有没有理由不这样做？

Answer 1

在你的打印CSS中添加：

thead{
  display:table-header-group;/*repeat table headers on each page*/
}
tbody{
  display:table-row-group;
}
tfoot{
  display:table-footer-group;/*repeat table footers on each page*/
}

根据您的需求进行调整

<强>更新

在获取最新的HTML并使用它后，我发现每页上重复的内容都有一个高度限制。

我将THEAD更改为包含：

<tr><td><div style="min-height:251px;">Hello World</div></td></tr>

如果我重复THEAD（已更改）和TFOOT（按原样）......我只能使用高度 251px 的高度。试图进入任何更高的高度会导致THEAD部分不再重复。

我将保存关于这是一个功能还是一个错误的“辩论”...但我认为如果你有一个高于250px的重复标题，它可能会从一些收缩中受益。 ; - ）

Answer 2

如果对thead height的限制有问题，请使用css编码将每个标题标签放在页面顶部。

有关更多信息，请参阅以下链接： How to use HTML to print header and footer on every printed page of a document?

Answer 3

添加@scunliffe的回答。我已将此添加到我的CSS中，因此它尽可能地将我的thead压缩到这个大小，并在IE11和Chrome 62中的所有页面中重复它

  thead {
        display: table-header-group;
       max-height:250px;
    }

是否有任何限制使其无法在Firefox中的每个页面上打印？

3 个答案: