如何让窄长HTML表格分多列展示且保留行顺序？

为什么column-count:2包裹表格无效？ #

CSS列布局（column-count）默认只会拆分文本流中的内联/独立块级元素，而表格是一个完整的容器结构，会被当作单个整体放入列布局中，不会将内部的行拆分到多列，这就是直接包裹表格没效果的核心原因。

解决方案 #

方案1：针对简单表格（无重复表头需求） #

通过修改表格行的显示属性，让每行成为独立的可拆分单元，再给表格主体添加列布局：

<style>
/* 空间充足时触发多列，可根据需求调整宽度阈值 */
@media (min-width: 600px) {
  .split-table tbody {
    column-count: 2;
    column-gap: 20px; /* 列间距 */
  }
  .split-table tbody tr {
    display: block;
    break-inside: avoid; /* 防止单一行被拆分到两列 */
    margin-bottom: 8px; /* 行之间的间距 */
  }
  /* 保持单元格的布局比例 */
  .split-table td {
    display: inline-block;
    width: 45%;
  }
}
</style>

<table class="split-table">
<tr><td>Cell A1</td><td>Cell B1</td></tr>
<tr><td>Cell A2</td><td>Cell B2</td></tr>
<tr><td>Cell A3</td><td>Cell B3</td></tr>
<tr><td>Cell A4</td><td>Cell B4</td></tr>
<tr><td>Cell A5</td><td>Cell B5</td></tr>
<tr><td>Cell A6</td><td>Cell B6</td></tr>
<tr><td>Cell A7</td><td>Cell B7</td></tr>
<tr><td>Cell A8</td><td>Cell B8</td></tr>
<tr><td>Cell A9</td><td>Cell B9</td></tr>
</table>

方案2：针对带表头/复杂表格（保留表头完整性） #

如果是包含表头、合计行的复杂表格，用CSS Grid实现，既能让行按顺序填充两列，又能保持表头和合计行的布局：

<style>
@media (min-width: 800px) {
  .complex-split-table {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 20px;
  }
  /* 表头横跨两列 */
  .complex-split-table thead {
    grid-column: 1 / -1;
  }
  /* 让tbody的行直接成为网格子元素 */
  .complex-split-table tbody {
    display: contents;
  }
  /* 每行按原表格列数分配宽度 */
  .complex-split-table tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 对应5列表头，按需调整数量 */
    gap: 10px;
    align-items: center;
  }
  /* 保留原有样式 */
  .complex-split-table th { text-align: left; font-family: sans-serif; }
  .complex-split-table td.numeric { text-align: right; }
  .complex-split-table tbody tr:nth-of-type(even) { background-color: #ccc; }
  .complex-split-table tfoot {
    grid-column: 1 / -1; /* 合计行横跨两列 */
    font-weight: bolder;
  }
}
</style>

<table class="complex-split-table" id="offering">
  <thead>
    <tr id="item.header"><th>Beschreibung</th><th>Preis</th><th>Prod-Nr.</th><th>Anzahl</th><th>Summe</th></tr>
  </thead>
  <tbody>
    <!-- 此处放入你的表格行内容 -->
  </tbody>
  <tfoot>
    <tr><td colspan="3">Summen</td><td class="numeric result" id="num-total">0</td><td class="numeric result" id="sum-total">0</td></tr>
  </tfoot>
</table>

关键说明 #

• 用@media媒体查询控制触发时机，只有当视口宽度达到设定值（空间充足）时，才启用多列布局；
• 方案1适合结构简单的表格，实现成本低；方案2适合需要保留表头、合计行的复杂表格，兼容性更好且布局更规整。

内容的提问来源于stack exchange，提问作者U. Windl