HTML-如何使用AD/tfoot打印页码

我尝试在HTML报告中使用计数器（页面），但没有成功。 我读了很多关于这个主题的StackOverflow页面，但我从未找到有效的解决方案

环境

• Chrome（最新版本：70.0.3538.110）
• Firefox（最新版本：63.0.3）

工作流程

• 将代码复制到HTML页面
• 用Chrome/Firefox打开它
• 打印出来
• 在预览中，数字计算不正确

问题？

• 你有关于这个主题的解决方案吗（如果可能的话，只使用HTML/CSS）
• 2018年主要浏览器不支持当前的CSS3标准
• 也许AD/pageBreak组合不完全受支持

谢谢

PS：请发布整个解决方案（不是部分HTML/CSS代码）

我的HTML演示

HTML CSS页面计数器
表1.1-1容器报告{
分页符后：始终；
}
thead.report-header{
显示：表头组；
}
tfoot.report-footer{
显示：表尾组；
}
@媒体印刷品{
@页面{
尺寸：A4人像；
}
.分页符{
前分页符：始终；
}
页数：后{
内容：“页面”计数器（第页）；
}
}
@媒体屏幕{
页数：后{
内容：“所有页面”；
}
}
标题
其他信息

第一页有一些数据。
第二页有一些数据。
第三页有一些数据。
第四页有一些数据。
并非所有浏览器都支持
内容：计数器（第页）到目前为止，我发现的唯一一个是Firefox。但它不适用于您的代码示例，因为您使用的是
table
s。具体来说，
之前的
分页符在
表中不起作用。Chrome允许你，但Firefox不允许

出于演示目的，我尝试用css重新创建您的表，并对结果进行分页

您需要将结果复制到一个新的.html文件中进行测试


正文{
宽度：300px；
}
#标题{
边框：1px实心；
溢出：隐藏；
}
#标题>div{
浮动：左；
宽度：50%；
线高：100px；
文本对齐：居中；
}
#脚{
边框：1px实心；
}
#标题p{
保证金：0；
}
#页眉#页码{
左边框：1px实心；
宽度：钙（50%-1px）；
}
#页码：后{
内容：“所有页面”；
}
@媒体印刷品{
.分页符{
前分页符：始终；
填充底部：120px；
}
#内容{
填充顶部：120px；
}
#标题{
显示：块；
位置：固定；
顶部：0pt；
左：0pt；
右：0pt；
}
#页码：后{
内容：“页面”计数器（第页）；
计数器增量：第页；
}
#脚{
显示：块；
位置：固定；
底部：0pt；
}
}

标题

第一页有一些数据。
第二页有一些数据。
第三页有一些数据。
第四页有一些数据。
其他信息。
可能与我读过的内容重复，但没有成功。谢谢，您的解决方案在Firefox 63.0.3和64.0上运行良好。但目前，它不在Chrome71.0.3578.98上。正在等待所有浏览器上的支持。。。。