如何用CSS避免双栏HTML报告内容提前分栏

我刚接触HTML和CSS，正在做一个双栏报告，最后用Python的WeasyPrint导出成PDF。碰到个问题：第一栏里的表格还没等第一栏填满，就直接断成两部分跑到第二栏去了，我想要的是第一栏先被内容填满，再往第二栏分流。

试过这些办法都没解决：

• 给表格套了div并加样式
• 调整表格的nowrap属性

最后用Stefan的方案搞定了，完美实现了预期的双栏布局：

1. 给表格的外层容器加上break-inside: avoid和page-break-inside: avoid样式，强制不让表格在栏内断裂
2. 确保双栏容器的CSS分栏属性设置正确

示例代码：
双栏容器CSS：

.report-container {
  columns: 2;
  column-gap: 2em;
}

表格外层容器及表格的CSS：

.table-wrapper {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

对应的HTML结构：

<div class="report-container">
  <!-- 第一栏的其他内容 -->
  <div class="table-wrapper">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
  <!-- 后续内容 -->
</div>

这样设置后，表格会完整保留在同一栏里，只有当第一栏剩余空间放不下整个表格时，才会把表格整体移到第二栏，保证第一栏先被前面的内容填满。

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