垂直行HTML表格单元格拆分及CSS对齐问题求助

嘿，这个行列反转表格的对齐问题我太熟了！原来的float: left+display: block方案在2×3及以上表格翻车，核心原因是每个被转成列的<tr>都是独立的块元素，没有统一的行列对齐机制，导致不同列的单元格高度/宽度没法同步。不过咱们完全可以用CSS Grid来搞定，不用碰JavaScript，下面给你详细说：

核心思路：用CSS Grid替代Float实现行列反转 #

CSS Grid天生具备强大的行列布局控制能力，能自动让所有列的对应行保持高度一致，完美解决对齐混乱的问题。同时我们可以用Flex布局来实现单元格拆分，避免嵌套表格的冗余结构。

优化后的CSS代码 #

/* 重置表格基础样式 */
table.test1 {
  border-collapse: collapse;
  border: none;
}

/* 将tbody设为Grid容器，实现行列反转 */
table.test1 > tbody {
  display: grid;
  grid-auto-flow: column; /* 让每个<tr>作为一列排列 */
  gap: 1px; /* 模拟原表格的边框间隙，可根据需求调整 */
}

/* 每个<tr>作为Grid子容器，内部<td>按行排列 */
table.test1 > tbody > tr {
  display: grid;
}

/* 统一单元格样式 */
table.test1 > tbody > tr > td {
  border: 1px solid #000;
  padding: 6px;
}

/* 处理需要拆分的单元格：用Flex实现横向拆分 */
table.test1 > tbody > tr > td.split-cell {
  display: flex;
}

table.test1 > tbody > tr > td.split-cell > span {
  flex: 1; /* 让两个拆分部分等宽 */
  border-right: 1px solid #000;
}

table.test1 > tbody > tr > td.split-cell > span:last-child {
  border-right: none; /* 去掉最后一个元素的右边框 */
}

调整后的HTML代码（简化嵌套表格） #

把原来嵌套的表格换成带split-cell类的<td>，内部用<span>拆分内容，结构更简洁：

<table class="test1"> 
  <tbody> 
    <tr> 
      <td>row 1, cell 1</td> 
      <td>row 1 cell 2</td> 
      <td>row 1 cell 3</td> 
    </tr> 
    <tr> 
      <td>row 2, cell 1</td> 
      <td class="split-cell"><span>row 2,</span><span> cell 2</span></td> 
      <td class="split-cell"><span>row 2,</span><span> cell 3</span></td> 
    </tr> 
  </tbody> 
</table>

如果必须保留嵌套表格的兼容方案 #

要是你没法修改HTML结构，必须保留嵌套表格，也可以在Grid布局的基础上调整嵌套表格的样式，让它和父单元格完美适配：

/* 保留前面的Grid核心样式，新增嵌套表格的样式 */
table.test1 > tbody > tr > td > table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border: none;
}

table.test1 > tbody > tr > td > table td {
  border: none;
  border-right: 1px solid #000;
}

table.test1 > tbody > tr > td > table td:last-child {
  border-right: none;
}

这样原来的嵌套表格HTML就能正常工作，同时Grid布局保证了所有单元格的对齐。

为什么这个方案可行？ #

• CSS Grid的grid-auto-flow: column直接把原来的行转成列，自动维护行列的对齐关系，所有列的对应行高度会自动统一；
• Flex布局实现单元格拆分，比嵌套表格更轻量，且能继承父单元格的尺寸；
• 全程只用CSS，不需要任何JavaScript，兼容性也很好（支持现代浏览器及IE11+）。

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