html - 在每个打印页面上重复 HTML 表格页脚

标签 html css html-table html-to-pdf table-footer

在我的体内,我有一个表格元素(如下所示)。 当我想打印我的 html 页面时,每个页面上都应该有 和 内容。页眉效果很好,但页脚仅显示在最后一页。 对于这样的问题,我已经找到了很多“解决方案”,但都没有用

向元素添加或删除 --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”

最佳答案

您可能正在使用 chrome。根据https://crbug.com/656232 (虽然表头打印在所有页面中,表页脚只出现在最后一页)Edge 和 Firefox 做你想做的事,但 chrome 支持正在进行中。

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

关于html - 在每个打印页面上重复 HTML 表格页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43931614/

相关文章:

javascript - 如何在 HTML 的可竞争表中设置字符串的最大长度?

javascript - 如何编写不区分大小写的 Javascript 搜索

php - 在我的网站上显示另一个网站的动态图像

jquery数据表没有完全占据宽度

javascript - 如何通过单击按钮获取单元格值

html - 图像不是垂直对齐中间 div

html - 如何从css中排除一个元素?

javascript - 菜单有 "scroll to #href"功能,但无法在那里使用目标空白链接

javascript - 当我只需要其中的 Checkbox 的 ng-click 时,如何不触发 TR 的 ng-click

javascript - 如果不满足条件,则单击时跳过元素