如何用纯CSS将无表头HTML表格行分为左右各50%布局

针对你现有无表头表格（20行单单元格结构）的布局需求，无需修改HTML或JS，仅用几行CSS就能实现竖排分栏效果（而非flex横向并排）：

核心代码 #

table {
  column-count: 2; /* 设定分栏数量，这里为2列 */
  column-gap: 1.5em; /* 列间距，可按需调整 */
}

tr {
  break-inside: avoid; /* 防止单一行被拆分到不同列 */
}

原理说明 #

• column-count直接指定表格的分栏数，20行数据会自动分成左右两列（1-10在左，11-20在右），完美匹配你要的竖排布局。
• break-inside: avoid确保每一行<tr>的完整性，不会出现跨行拆分的情况。
• 若需要自适应列宽，可将column-count替换为column-width（例如column-width: 120px），浏览器会根据容器宽度自动计算列数。

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