仅使用CSS能否将20行1列的HTML表格渲染为10行2列？

当然没问题，完全不需要修改你的HTML结构，只靠CSS的网格布局（Grid）就能轻松实现这个需求。下面是具体的实现方案：

核心思路 #

我们可以把表格的<tbody>元素设置为CSS Grid容器，指定它为2列等宽的布局，这样原本的20个<tr>元素就会自动填充到网格中，形成10行2列的效果。同时保留表格的边框合并特性，让样式和原生表格保持一致。

完整代码示例 #

HTML（无需修改）

<table>
  <thead></thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <!-- ... 中间行省略 ... -->
    <tr><td>Row 19</td></tr>
    <tr><td>Row 20</td></tr>
  </tbody>
</table>

CSS实现

/* 保留表格的边框合并特性，让样式更贴近原生表格 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

/* 将tbody设置为Grid容器，定义2列等宽 */
tbody {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* 调整单元格样式，保持表格的视觉效果 */
td {
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
}

/* 可选：让td直接成为网格项，让单元格对齐更整齐 */
tr {
  display: contents;
}

效果说明 #

• 原本的20个单行<tr>会被Grid布局自动排列为10行2列，顺序是从左到右、从上到下（和原生表格的行顺序一致）。
• repeat(2, 1fr)确保两列宽度均等，你也可以换成固定宽度（比如200px）或者其他比例（比如2fr 1fr）来调整列宽。
• display: contents是可选配置，它会让<tr>元素的样式“隐藏”，直接让<td>成为网格的直接子元素，让单元格的边框和间距更贴合原生表格的表现。

这个方案兼容性很好，目前所有主流浏览器（Chrome、Firefox、Safari、Edge）都支持CSS Grid布局，不需要担心兼容性问题。

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