加了border仍是粗线或双线是因为浏览器默认border-collapse: separate，导致相邻单元格边框叠加。必须设置table { border-collapse: collapse; }，再统一table和th、td的border值，并合理配置padding。
为什么加了border还是粗线或双线？
浏览器默认用border-collapse: separate，每个th和td都独立画边框，左边单元格的右框 + 右边单元格的左框 = 视觉上两条线叠在一起，中间还夹着默认border-spacing: 2px的缝隙。你看到的“粗边框”，其实是两套边框在打架。
常见错误包括：
- 只给
table设border: 1px solid #000，结果只有外框，内部没线 - 给
th和td都加了border，却漏掉border-collapse: collapse - 用过时的
border="1"属性，颜色不可控、粗细不均、无法响应式
border-collapse: collapse必须写在table上
这个属性只对table元素生效，写在tr、th或td上完全无效。它不是“可选优化”，而是细线边框的前提条件——没有它，其他所有border设置基本白忙。
正确三步缺一不可：
-
table { border-collapse: collapse; }—— 合并所有相邻边框，废掉border-spacing -
table { border: 1px solid #333; }—— 控制外边框（可选但建议） -
th, td { border: 1px solid #333; }—— 控制内边框，值必须和外边框一致；若th设2px而td是1px，交界处会视觉加粗
细线边框的关键参数组合
细线 ≠ 单纯调小border-width，而是border-collapse、统一border值、合理padding三者协同的结果。
推荐配置（直接可用）：
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
}
th {
background-color: #f9f9f9;
}
注意点：
-
padding决定“疏密感”：想让表格更紧凑，把padding降到4px 8px；更宽松则加到10px 16px - 别只依赖
border-collapse解决响应式问题——它不管宽度，小屏仍会横向溢出，需额外加table { display: block; overflow-x: auto; } - 如果表格意外收缩，大概率是漏了
width: 100%或min-width: fit-content
细线边框容易被忽略的兼容性细节
border-collapse: collapse在所有现代浏览器中稳定支持，但有两个隐藏坑：
-
empty-cells: show或hide在collapse模式下失效，空单元格是否显边框，完全由th, td { border: ... }控制 -
border-spacing在collapse下被忽略，想调列间距？只能动padding或width，别白费劲去设border-spacing: 0 - 深色背景上
#ddd可能不够对比，换成#999或加box-shadow: 0 0 0 1px rgba(0,0,0,0.05)增强层次
真正让细线看起来“干净”的，从来不是像素级的0.5px，而是border-collapse是否到位、border是否统一、padding是否呼吸得当。这三个点没对齐，再细的数值也糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
