Счетчик CSS-приращения не работает с повторяющимся заголовком таблицы

#html #css #reactjs #printing #reactstrap

#HTML #CSS #реагирует на #печатание #реагирующий ремень

Вопрос:

Я пытаюсь составить отчет с номерами страниц. Моя таблица слишком велика и разбита на множество страниц.

Мне нужен номер страницы, чтобы он отображался во всех документах. Thead повторяется на каждой странице, и это именно то, что мне нужно, но обратное приращение не работает и всегда показывает «1».

Я использую Reactstrap.

Это мой код:

 lt;div  id="printMe" gt;  lt;Table size="sm" borderedgt;  lt;theadgt;  lt;tr style={{ borderTop: "solid" }}gt;  lt;th colSpan="2"gt;Companys Namelt;/thgt;  lt;th colSpan="1"gt;lt;div className="pageNumber"gt;Sheet lt;/divgt;lt;/thgt;  lt;/trgt;  lt;tr style={{ borderBottom: "solid" }}gt;  lt;th colSpan="2"gt;Statuslt;/thgt;  lt;th colSpan="1"gt;Datelt;/thgt;  lt;/trgt;  lt;trgt;  lt;thgt;Codelt;/thgt;  lt;thgt;Namelt;/thgt;  lt;thgt;Detailslt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  {data.map(est =gt;  lt;trgt;  lt;tdgt;{est.code}lt;/tdgt;  lt;tdgt;{est.name}lt;/tdgt;  lt;tdgt;{est.details}lt;/tdgt;  lt;/trgt;  )}  lt;/tbodygt;  lt;/Tablegt; lt;/divgt;  

И это CSS:

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