如何用HTML和CSS为表格filename3、filename4列整体加边框并解决边框重叠

你可以通过分别控制两个目标单元格的边框样式，配合表格的边距设置实现整体边框效果，步骤如下：

1. 先给表格设置border-spacing: 0消除单元格默认间隙，避免边框出现错位
2. 给id为filename3的单元格设置上、左、下三条边框，取消右侧边框
3. 给id为filename4的单元格设置上、右、下三条边框，取消左侧边框

补充说明：你提供的原有代码缺少<tr>标签包裹单元格，不符合HTML表格规范，示例中已补全
完整示例代码如下：

<!-- HTML部分 -->
<table>
  <tbody>
    <tr>
      <td id="filename1"> 1</td>
      <td id="filename2">1 </td>
      <td id="filename3"> 1</td>
      <td id="filename4"> 1</td> 
    </tr>
  </tbody>    
</table>

/* CSS部分 */
table {
  border-spacing: 0;
}
#filename3 {
  border: 1px solid #000;
  border-right: none;
}
#filename4 {
  border: 1px solid #000;
  border-left: none;
}
/* 如果需要统一两个单元格的内边距可以加以下样式 */
#filename3, #filename4 {
  padding: 4px 8px;
}

如果后续需要给更多连续单元格做整体边框，也可以用同样的逻辑：首个连续单元格只保留上、左、下边框，末尾连续单元格只保留上、右、下边框，中间的连续单元格只保留上下边框即可。

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