通过CSS设置表格边框属性可去除竖线，常用方法有两种：1. 使用
border-collapse: collapse合并边框后，单独用border-top和border-bottom设置横线；2. 对`/元素设置border-left: none; border-right: none`直接移除竖线边框。在网页设计中,HTML表格的竖线（列边框）有时会干扰视觉简洁性，以下是专业、可靠的解决方案，通过CSS精准控制边框样式：
核心原理
表格边框由三部分构成：
- 表格容器（
<table>） - 单元格（
<td>/<th>） - 边框合并模式（
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; /* 分组标识线 */
}
关键注意事项
-
浏览器兼容性：
border-collapse支持所有现代浏览器（包括IE8+）- 伪类选择器（
:first-child）兼容IE9+
-
响应式适配：
@media (max-width: 600px) { td, th { border-right: none; } /* 小屏幕下去除竖线 */ } -
可访问性：
- 保留至少3:1的横线对比度
- 通过
caption标签提供表格说明
-
替代方案：
如需完全无框线，推荐使用div+CSS Grid布局：
.grid-container { display: grid; grid-template-columns: 1fr 1fr; /* 两列 */ }
效果验证建议
- 使用浏览器开发者工具（F12）检查元素边框模型
- 通过W3C CSS验证器检查代码
- 在移动端和桌面端分别测试渲染差异
引用说明：本文解决方案遵循W3C CSS规范，参考MDN Web Docs的border-collapse文档，核心方法已在Chrome、Firefox、Edge最新版本通过测试，实际开发中建议使用CSS预处理器（如Sass）管理边框变量。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/20449.html
