我尝试在 HTML 报告中使用 counter(page) 但没有成功。我读了很多关于这个主题的 StackOverflow 页面，但我从未找到有效的解决方案！
谢谢 ！
PS：请发布整个解决方案（而不是部分 HTML/CSS 代码）！
我的 HTML 演示
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML CSS Page counter</title>
<style>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
@media print{
@page {
size: A4 portrait;
}
.pageBreak {
page-break-before: always;
}
span.page-number:after {
content: "Page " counter(page);
}
}
@media screen{
span.page-number:after {
content: "All pages";
}
}
</style>
</head>
<body>
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
<table border="1" width="100%">
<tr height="100px">
<td align="center" valign="middle">Header title</td>
<td><span class="page-number"></td>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
<table border="1" width="100%">
<tr height="50px">
<td><p>Other info</p></td>
</tr>
</table>
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
First page with some data.
<div class="pageBreak"></div>
Second page with some data.
<div class="pageBreak"></div>
Third page with some data.
<div class="pageBreak"></div>
Fourth page with some data.
<div class="pageBreak"></div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>并非所有浏览器都支持，content:counter(page);到目前为止，我发现唯一支持的浏览器是 Firefox。但它不适用于您的代码示例，因为您正在使用tables. 具体来说，page-break-before不（不应该）在table. Chrome 允许，但 Firefox 不允许。
出于演示目的，我尝试在 css 中重新创建表格并对结果进行分页。
您需要将结果复制到新的 .html 文件中进行测试。
body {
width: 300px;
}
#header {
border: 1px solid;
overflow: hidden;
}
#header>div {
float: left;
width: 50%;
line-height: 100px;
text-align: center;
}
#foot {
border: 1px solid;
}
#header p {
margin: 0;
}
#header #page-number {
border-left: 1px solid;
width: calc(50% - 1px);
}
#page-number:after {
content: "All pages";
}
@media print {
.pageBreak {
page-break-before: always;
padding-bottom: 120px;
}
#content {
padding-top: 120px;
}
#header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
}
#page-number:after {
content: "Page " counter(page);
counter-increment: page;
}
#foot {
display: block;
position: fixed;
bottom: 0pt;
}
}<div id="header">
<div id="header-title">
<p>Header title</p>
</div>
<div id="page-number"></div>
</div>
<div id="content">
First page with some data.
<div class="pageBreak"></div>
Second page with some data.
<div class="pageBreak"></div>
Third page with some data.
<div class="pageBreak"></div>
Fourth page with some data.
<div class="pageBreak"></div>
</div>
<div id="foot">
Other info.
</div>