如何让HTML表格在到达页脚前自动分页换行？

我需要打印动态生成的HTML表格及页面页脚，为此定义了如下HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>List</title>

  <link rel="stylesheet" href="{{styleRef}}" />
</head>

<body>
  <div id="tableDiv">
    <table class="songsTable">
      <colgroup>
        <col class="imageCol" />
        <col class="artistCol" />
        <col class="titleCol" />
        <col class="genreCol" />
      </colgroup>

      <thead>
        <tr>
          <th colspan="4" class="genreHead">{{Genre}}</th>
        </tr>
        <tr>
          <th class="image"></th>
          <th>Interpret</th>
          <th>Titel</th>
          <th class="genre">Genre</th>
        </tr>
      </thead>

      <tbody>
        <tr class="loop">
          <td class="image"><img alt="" src="{{ImageRef}}" /></td>
          <td>{{Artist}}</td>
          <td>{{Title}}</td>
          <td class="genre">{{Genre}}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <footer>
    <div>Brought to you by<br><img id="logo" alt="logo" src="{{LogoRef}}" /></div>
  </footer>
</body>

</html>

同时使用以下CSS样式（节选）：

body
{
  background-color: white;
  color: darkslategray;
  font: 12pt "Open Sans";
  padding: 0;
  margin: 0;
}

table.songsTable
{
  font-size: 100%;
  break-after: page;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table.songsTable tbody > tr > td
{
  padding: 0 1ex;
}

footer
{
  position: fixed;
  bottom: 0;
  width: 100%;
}

footer > div
{
  padding: 1ex 3ex;
  margin-left: 50%;
  background-color: #1E3142;
  color: white;
  text-align: right;
  font-size: 90%;
  border: .1em solid black;
}

@page
{
  margin-bottom: 2em;
}

但目前表格行无法在页脚上方自动分页，出现了内容与页脚重叠的情况：

要让表格在到达页脚前自动分页，需要调整CSS的打印相关规则，具体修改如下：

1. 调整页面底部边距，匹配页脚高度
   固定定位的页脚在打印时不会被纳入页面流计算，因此需要通过@page预留足够的底部边距，确保表格内容不会进入页脚区域。根据页脚的实际高度调整margin-bottom值：

@page
{
  margin-bottom: 3em; /* 数值需大于等于页脚的实际高度 */
}

2. 优化表格的分页规则
   移除表格的break-after: page（若不需要每个表格强制单独一页），同时设置表格行不被拆分到两页，允许tbody内部正常分页：

table.songsTable
{
  font-size: 100%;
  /* 移除 break-after: page; 避免强制每个表格分页 */
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table.songsTable tbody {
  page-break-inside: auto; /* 允许tbody内部分页 */
}

table.songsTable tbody tr {
  page-break-inside: avoid; /* 防止单一行被拆分到两页 */
}

3. 固定页脚高度（可选）
   为页脚容器设置最小高度，方便精准计算页面边距：

footer > div
{
  padding: 1ex 3ex;
  margin-left: 50%;
  background-color: #1E3142;
  color: white;
  text-align: right;
  font-size: 90%;
  border: .1em solid black;
  min-height: 2em; /* 固定页脚最小高度 */
}

通过以上修改，表格内容会在到达页脚预留的边距区域时自动分页，避免与页脚重叠。

内容的提问来源于stack exchange，提问作者AxD