如何在HTML表格的单个列中实现两行内容的布局？

问题排查 #

• 标签嵌套错误：第二行你把两个<td>写在了第一个<td>内部，属于非法的HTML结构，浏览器会错误解析单元格的数量和位置，导致样式异常。
• 缺失跨行合并属性：你要实现的第一列「SOL」单元格占2行高度的效果，需要给该单元格添加rowspan="2"属性，指定纵向跨越的行数。
• 单元格数量不匹配：第一行共有4个单元格，第二行因为第一列已经被跨2行的SOL占用，只需写3个<td>即可，你原代码冗余的标签导致单元格数量错位。

正确实现代码 #

你原有CSS样式不需要修改，可直接沿用：

table,
td,
th {
  border: 1px solid black;
}

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

修正后的HTML代码如下：

<table>
  <tr>
    <td rowspan="2">SOL</td>
    <td>K</td>
    <td>Y</td>
    <td>M</td>
  </tr>
  <tr>
    <td>b</td>
    <td>a1</td>
    <td>b</td>
  </tr>
</table>

修改后即可实现你需要的表格合并效果。

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