如何为HTML表格添加列分隔白色边框？

核心方案：通过CSS控制单元格边框 #

要实现和行分隔一致的白色列分隔线，关键是给表格的单元格（<td>、<th>）设置右侧边框，同时配合表格的border-collapse属性确保边框合并显示。

示例代码 #

假设你当前的表格结构类似这样：

<table class="custom-table">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

添加以下CSS即可实现需求：

.custom-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框，避免出现双线条 */
}

.custom-table th,
.custom-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #fff; /* 行分隔线（你已实现的部分） */
  border-right: 1px solid #fff; /* 添加列分隔线 */
}

/* 最后一列不需要右侧边框，避免表格右侧多出线条 */
.custom-table th:last-child,
.custom-table td:last-child {
  border-right: none;
}

关键说明 #

• border-collapse: collapse：必须设置这个属性，否则单元格边框会独立显示，可能出现间隙或双线条。
• border-right: 1px solid #fff：给每个单元格添加右侧白色边框，实现列分隔效果。
• 移除最后一列的右侧边框：防止表格最右边多出一条不必要的线条，保证视觉美观。

特殊情况处理 #

如果你的表格背景是深色，或者需要调整线条粗细/颜色，直接修改border-right的参数（比如把1px改成2px，#fff换成其他颜色）即可。如果行分隔线是通过其他方式实现的（比如<tr>的边框），只需要确保列分隔线的样式和行分隔线保持一致就行。

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