在每个打印页面上重复 HTML table-页脚

Question

在我体内有一个 table 元素（如下所示）。当我想打印我的 html 页面时，每页上都应该有和内容。页眉效果很好，但页脚仅显示在最后一页。我发现很多 "solutions" 解决了这样的问题，但 none 有效

向元素添加或删除 --style="display: table-footer-group"-- 没有任何作用。

导入只用HTML和CSS

<table>
    <thead>
        <tr>
            <td colspan="5">
                <table style="width: 100%;">
                    <tr>                      
                        <td>Some Header Stuff</td>
                    </tr>                        
                </table>
            </td>
        </tr>
          <tr class="border_bottom">
              <td colspan="1" class="styledheader">header1</td>
              <td colspan="1" class="styledheader">header2</td>
              <td colspan="1" class="styledheader">header3</td>
              <td colspan="1" class="styledheader">header4</td>
              <td colspan="1" class="styledheader">header5</td>
          </tr>
    </thead>
       <tfoot>
            <tr class="border_top">
                <td colspan="1">Footer Left</td>
                <td colspan="4">Footer Right</td>
            </tr>
        </tfoot>
    <tbody>      
    <tr>
        <td>SomeText</td>
        <td>SomeText</td>
        <td>SomeText</td>
        <td>SomeText</td>
        <td>SomeText</td>
    </tr> 
    ---More rows
   </tbody>
</table>

--- 编辑 12.05.2017 09:45 -- 将代码更改为 creativename & daviddomain 写

已更改

<td colspan="1" id="styledheader">header1</td>

至

<td colspan="1" class="styledheader">header1</td>

并将第一个“/tbody”设为"tbody"

Answer 1

您没有打开带有 <tbody> 标签的 tbody。多次使用时也使用 classes 而不是 id：

<td colspan="1" class="styledheader">header1</td>
<td colspan="1" class="styledheader">header2</td>

而不是

<td colspan="1" id="styledheader">header1</td>
<td colspan="1" id="styledheader">header2</td>

不要忘记将您的 CSS

中的 ID 选择器更改为 class 选择器

Answer 2

您可能正在使用 chrome。根据 https://crbug.com/656232（虽然 table 页眉打印在所有页面中，table 页脚仅出现在最后一页）Edge 和 Firefox 做你想做的事，但 chrome 支持是进行中。

因此，在 chrome 修复该错误之前，请使用其他浏览器。

在每个打印页面上重复 HTML table-页脚

Repeat HTML table-footer on every printed page

html

css

html-table

html-to-pdf

table-footer