CSS 计数器增量不适用于重复表 header

Question

我试图用页码制作报告。 我的表格太大，分成很多页。

我需要在所有广告中显示页码。 标题在每一页中重复，这正是我所需要的，但反增量不起作用并且始终显示“1”。

我正在使用 Reactstrap。

这是我的代码：

<div
    id="printMe"
>
    <Table size="sm" bordered>
        <thead>
            <tr style={{ borderTop: "solid" }}>
                <th colSpan="2">Companys Name</th>
                <th colSpan="1"><div className="pageNumber">Sheet </div></th>
            </tr>
            <tr style={{ borderBottom: "solid" }}>
                <th colSpan="2">Status</th>
                <th colSpan="1">Date</th>
            </tr>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            {data.map(est =>
                <tr>
                    <td>{est.code}</td>
                    <td>{est.name}</td>
                    <td>{est.details}</td>
                </tr>
            )}
        </tbody>
    </Table>
</div>

这是 CSS：

@media print{ 
  @page {
    margin: ${marginTop} ${marginRight} ${marginBottom} ${marginLeft} 
  !important;
  } 
  body{
    counter-reset: section;
  } 
  .pageNumber {
    counter-increment: section; 
  } 
  .pageNumber::after{
    content:counter(section);
  }
}