表格边框看起来是双线，是因为浏览器默认采用separate边框模型，使table、th、td的边框独立显示并叠加；解决方法是必须在table元素上设置border-collapse: collapse，才能合并相邻边框为单线。
为什么表格边框看起来是双线？border-collapse: collapse 必须加在 table 上
这不是 bug，是浏览器默认的边框分离模型。当你给 table、th、td 都设置了 border，又没处理合并逻辑，相邻单元格的边框就会并排显示，视觉上变粗或重叠。
解决方法只有一条硬规则：border-collapse: collapse 必须写在 table 元素的 CSS 规则里，不能只写在 th 或 td 上，否则无效。
-
border-collapse: collapse后，border-spacing自动失效，不用管它 - 如果想保留单元格间距（比如做卡片式分隔），改用
border-collapse: separate，再配border-spacing: 2px - 注意：用了
collapse后，border-radius对table本身基本无效，圆角得靠包装容器或overflow: hidden配合
怎么只显示外边框，内部无分隔线？
常见于仪表盘摘要表或极简数据卡片。核心是「不给单元格设边框，只给 table 设」，但必须配合 border-collapse: collapse 防止内部意外出线。
示例代码：
table {
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
}
th, td {
/* 不设 border！只留 padding 维持呼吸感 */
padding: 12px 16px;
}
- 如果用了
border-collapse: separate，哪怕th/td没边框，border-spacing仍会制造空白间隙，此时要显式设border-spacing: 0 - 想让表头和第一行之间有强调线？单独给
th加border-bottom，比全局设边框更可控
border-radius 圆角为啥不生效？
直接给 table 加 border-radius 常常没反应，根本原因是：单元格边框会溢出圆角区域，浏览器按默认盒模型渲染，把圆角“裁掉”了。
真正起效的组合只有两个条件同时满足：
-
table设置border-radius和overflow: hidden -
border-collapse必须是separate（collapse模式下圆角会被忽略）
示例：
table {
border: 2px solid #007acc;
border-radius: 8px;
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
}
th, td {
border: 1px solid #e0e0e0;
}
注意：border-spacing: 0 是为了不让 separate 模式产生空隙；overflow: hidden 才是让圆角“咬住”内部边框的关键。
如何用不同边框样式区分表头和数据行？
不需要给每个元素都写完整 border，用方向性边框属性更轻量、更易维护。
- 表头强化：只设
th { border-bottom: 2px solid #333; }，其他方向不留边 - 数据行分隔：只设
td { border-bottom: 1px solid #eee; }，最后一行可通过tr:last-child td { border-bottom: none; }去掉多余线 - 左侧悬停列强调：用
tr:hover td:first-child { border-left: 2px solid #007acc; }
这种写法避免了重复定义四边，也方便后续通过类名切换样式，比如 .compact-table td { border-bottom: 0.5px solid #f0f0f0; }。
边框颜色别用纯黑或纯白——和背景对比太强，容易视觉疲劳；推荐用 rgba(0,0,0,0.08) 这类低透明度灰，既清晰又柔和。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
