【问题标题】:Repeat HTML table-footer on every printed page在每个打印页面上重复 HTML 表格页脚
【发布时间】:2017-10-11 09:53:59
【问题描述】:

在我的身体中,我有一个表格元素(如下所示)。 当我想打印我的 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”

【问题讨论】:

  • 您的示例中有 2 个关闭 tbody 标记,但没有打开 tbody 标记。 id 也必须是唯一的。

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


【解决方案1】:

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

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

【讨论】:

  • 这已在 chrome 62 中得到修复。如果您发现在 chrome 63+ 中出现此行为的页面,请在 crbug.com/new 提交错误
  • 我发现要让页脚出现在 Chrome 71 的所有页面上,必须有一个表头元素,即使它是空的 (&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;)
【解决方案2】:

您没有打开带有&lt;tbody&gt; 标签的tbody。多次使用时也要使用类而不是 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>

不要忘记将 id 选择器更改为 CSS 中的类选择器

【讨论】:

  • 进行了您建议的那些小改动,但没有任何影响 - 页眉显示在每一页上 - 页脚不显示
  • @Schauby 您希望tfoot 显示在tbody 上方,对吗?如果是,我认为不使用 CSS 是不可能的,因为据我所知,tfoot 总是在tbody 之后显示。
  • 不,我想要tfoot 下面的tbody - 我的问题是tfoot 只显示在文档的末尾,我希望它在每一页的末尾跨度>
  • 我刚刚意识到您的问题中有一个 Html-to-pdf 标签。看看这个答案:stackoverflow.com/a/35662608/5470690.
猜你喜欢
  • 2015-03-11
  • 1970-01-01
  • 2017-11-03
  • 1970-01-01
  • 1970-01-01
  • 2012-12-29
  • 2017-09-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多