含rowspan的CSS表格内部垂直边框实现方案问询

针对采用折叠边框（border-collapse: collapse）的表格，要实现仅显示内部垂直边框、无外侧边框的效果，且兼容含rowspan/colspan的场景，最简洁可靠的CSS方案如下：

核心思路 #

利用边框合并的特性：

1. 给所有单元格添加左侧边框；
2. 移除表格的左右外侧边框，让第一列单元格的左侧边框与表格左侧边框（无）合并，从而隐藏第一列的外侧边框；
3. 其他列的单元格左侧边框会自然成为内部垂直分隔线，不受rowspan/colspan的DOM结构影响。

代码示例 #

CSS #

table {
  border-collapse: collapse;
  /* 移除表格的左右外侧边框，上下边框可按需保留或移除 */
  border-left: none;
  border-right: none;
  /* 可选：如果不需要顶部/底部边框，也可以设置为none */
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

td, th {
  /* 给所有单元格添加左侧边框 */
  border-left: 1px solid #333;
  /* 可选：添加水平边框，按需调整 */
  border-top: 1px solid #333;
}

HTML（测试用例） #

<table>
  <tbody>
    <tr>
      <td rowspan="2">foobar</td>
      <td>one</td>
      <td>three</td>
    </tr>
    <tr>
      <td>two</td>
      <td>four</td>
    </tr>
    <tr>
      <td>five</td>
      <td colspan="2">six & seven</td>
    </tr>
  </tbody>
</table>

效果说明 #

• 第一列单元格的左侧边框与表格左侧边框（无）合并，不会显示外侧边框；
• 第二列及以后的单元格左侧边框会显示为内部垂直分隔线，即使单元格存在rowspan或colspan，视觉上的列分隔线依然正常显示；
• 表格的上下边框可按需保留或移除，不影响内部垂直边框的效果。

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