如何让HTML表格在打印视图中保持100%高度？

我有5个横向排列的表格，均设置为100%高度，在浏览器中能正常拉伸填充可用空间，但在打印视图中无法拉伸。我希望表格能跨页断行并保留表头。

尝试过使用单列的单个表格（因卡片高度不同，无法放入单个5 x n表格），但要么无法内部断行，要么出现异常布局，修改无关的边距或内边距都会破坏整体布局。

最简示例代码 #

这是大型文档的一部分，无法提供完整实现，以下是最简示例：

<style>
  .flex {
    display: flex;
    gap: 1rem;
    /* 模拟表格上方的内容 */
    margin-top: 50vh;
  }

  table {
    flex: 1;
  }

  .card {
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: lightblue;
  }
</style>
    
<div class="flex">
  <table>
    <thead>
      <tr>
        <td>
          <div style="background: red">COLUMN1</div>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <!-- 更多卡片 -->
    </tbody>
  </table>
  <!-- 更多表格 [1..5] -->
</div>

问题表现 #

• 浏览器中：表格会被拉伸填充可用空间
• 打印视图中：表格高度仅为内部卡片的总高度，无法拉伸

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