使用table-header-group

Question

我目前正在尝试制作一个基于表格的标题，以便在每次出现分页符时重复执行。如果表头内部不包含任何表，则重复表头操作。

我正在使用此代码：

<table class="report-container">
   <thead class="report-header">
      <tr>
         <th class="report-header-cell">
           ...
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
       <tr>
          <td class="report-footer-cell">
           ...
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
       <tr>
          <td class="report-content-cell">
            ...
          </td>
       </tr>
     </tbody>
</table>

这个CSS：

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
} 

我可以在我的th.report-header-cell中放入任何想要的东西，这将起作用。但是如果我在里面放另一张桌子，那不是。是否有技巧解决这种问题？

我试图更改表格的显示，但也无法正常工作。

我在Google Chrome上运行，我的projet使用Bootstrap 4表，但是请注意，基本表也无法使用。

编辑：这是我在th.report-header-cell中放置表格的方式：

<table class="report-container">
    <thead class="report-header">
        <tr>
            <th class="report-header-cell">
                <table style="width:100%;">
                    <tbody>
                        <tr>
                            <td style="width:50%;">
                                ...
                            </td>
                            <td style="width:50%;">
                                ...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </th>
        </tr>
    </thead>
</table>

此示例不会在每页上打印我的标题，而仅在第一页上打印。页脚将继续工作，并将打印在每页上。