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

Question

我有一个表有一个 <thead> , 一个 <tfoot>和一个 <tbody> .理论上它应该在每个页面上打印 thead 和 tfoot，但由于某些原因，如果它包含某些元素在一起，thead 不会。

这个有效:

<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 部分不重复。

关于这是一个功能还是一个错误，我将保留“争论”...但我认为，如果您有一个重复的 header 高度超过 250 像素，它可能会受益于一些收缩。 ;-)