HTML表格如何去掉竖线？

在网页设计中,HTML表格的竖线（列边框）有时会干扰视觉简洁性，以下是专业、可靠的解决方案，通过CSS精准控制边框样式：

核心原理

表格边框由三部分构成：

1. 表格容器（<table>）
2. 单元格（<td>/<th>）
3. 边框合并模式（border-collapse）

通过CSS的border属性控制具体边框的显隐，需配合border-collapse: collapse;确保样式一致性。

全局去除所有竖线

<style>
  table {
    border-collapse: collapse; /* 关键：合并边框模型 */
  }
  td, th {
    border-left: none;   /* 移除左侧竖线 */
    border-right: none;  /* 移除右侧竖线 */
    border-top: 1px solid #ddd;  /* 保留横线 */
    border-bottom: 1px solid #ddd;
    padding: 8px;
  }
</style>
<table>
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>28</td></tr>
</table>

保留首尾竖线的极简风格

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 12px;
  border-right: none; /* 移除内部竖线 */
}
/* 保留首列左竖线和尾列右竖线 */
tr td:first-child, tr th:first-child {
  border-left: 1px solid #ddd; 
}
tr td:last-child, tr th:last-child {
  border-right: 1px solid #ddd;
}

列分组控制（复杂表格适用）

.col-group1 td:nth-child(2) {  /* 针对第二列 */
  border-right: none; 
}
.col-group2 td:first-child {
  border-left: 2px solid blue; /* 分组标识线 */
}

关键注意事项

1. 浏览器兼容性：

   • border-collapse支持所有现代浏览器（包括IE8+）
   • 伪类选择器（:first-child）兼容IE9+

2. 响应式适配：

   

   @media (max-width: 600px) {
     td, th { border-right: none; } /* 小屏幕下去除竖线 */
   }

3. 可访问性：

   • 保留至少3:1的横线对比度
   • 通过caption标签提供表格说明

4. 替代方案：
   如需完全无框线，推荐使用div+CSS Grid布局：

   

   .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr; /* 两列 */
   }

效果验证建议

1. 使用浏览器开发者工具（F12）检查元素边框模型
2. 通过W3C CSS验证器检查代码
3. 在移动端和桌面端分别测试渲染差异

引用说明：本文解决方案遵循W3C CSS规范，参考MDN Web Docs的border-collapse文档，核心方法已在Chrome、Firefox、Edge最新版本通过测试，实际开发中建议使用CSS预处理器（如Sass）管理边框变量。