html中的垂直分页符

假设我有一张这样的桌子：

<table>
    <thead>
        <tr>
          <th>Col A</th>
          <th>Col B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Page 1</td>
          <td>Page 2</td>
        </tr>
    </tbody>
</table>

科拉
B列
第1页
第2页

目标是使标题栏A列及其所有内容显示在第一页，而标题栏B列及其所有内容显示在第二页

到目前为止，我尝试了4种不同的方法，但都没有成功：

  <style type = "text/css">
     th {page-break-after: always;}
     th {page-break-after: left;}
     td {page-break-after: always;}
     td {page-break-after: left;}
  </style>

th{之后的分页符：始终；}
th{左后分页符；}
td{page break after:always；}
td{左后分页符；}

我使用了nuclear选项，而不是一个表和两列，我创建了两个表和一列，并使用了分页符

  <style type = "text/css">
     table {page-break-after: always;}
  </style>

<table>
    <thead>
        <tr>
          <th>Col A</th>
         </tr>
    </thead>
    <tbody>
        <tr>
          <td>Page 1</td>
         </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
          <th>Col B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>Page 2</td>
        </tr>
    </tbody>
</table>

表{之后的分页符：始终；}
科拉
第1页
B列
第2页

这不是最优雅的解决方案，但它确实奏效了