如何用CSS为2×4表格仅添加中间竖边框（消除左右外边框）

嘿，我懂你要的效果了——一个只有中间一条竖线分隔的2列4行表格，完全没有其他边框。你之前的代码之所以会在左右外侧多出线条，是因为你给每个<td>都同时加了左、右边框，这样第一列的左边框就会出现在表格最左侧，第二列的右边框会出现在最右侧，自然就有多余的边框了。

这里有两种简单的解决方案，都能完美实现你要的效果：

方案一：通用型（适配任意列数） #

这种写法不管表格有多少列，都只会显示列与列之间的分隔线，不会出现左右外侧的边框：

table {
  border-collapse: collapse;
}
td {
  /* 给所有单元格添加右边框 */
  border-right: 1px solid #f00;
}
/* 移除最后一列单元格的右边框 */
td:last-child {
  border-right: none;
}

方案二：针对2列表格的简化写法 #

因为你的表格只有2列，直接给第一列的单元格添加右边框就足够了：

table {
  border-collapse: collapse;
}
/* 只给第一列的单元格加右边框 */
td:first-child {
  border-right: 1px solid #f00;
}

完整代码示例 #

不管用哪种方案，你的HTML结构都可以保持不变：

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
  </tbody>
</table>

这样修改后，表格就只会在两列之间显示一条红色竖线，左右两侧和上下都不会有任何边框啦！

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