html表格细线边框必须使用border-collapse: collapse（作用于table元素），配合统一设置table、th、td的border（如0.5px solid rgba(0,0,0,0.15)），否则仅设border属性无效；框架或遗留属性（如border="1"）会干扰，需检查computed样式并覆盖。
table 的 border 属性根本不能改细线边框
直接在 <table border="1"> 里写数字，或者改成 <code>border="0.5"、border="0" 都无效。HTML5 已将 border 属性降级为纯语义标记（表示“这是数据表”），它不接受小数、不控制颜色、不响应 solid 或 dotted，浏览器要么忽略，要么退化成不可控的默认渲染。你看到的“细线”或“粗线”，其实是 UA 默认样式在作祟，不是你设出来的。
border-collapse: collapse 是细线边框的前提开关
没这行 CSS，所有边框设置都白忙活：
- 浏览器默认用
border-collapse: separate，table、th、td各画各的边框，1px + 1px = 视觉上 2px 粗线 -
border-collapse: collapse必须写在table元素上，写在th或td上无效 - 它开启后，相邻边框才真正“合并”，交界处按“宽者胜出”规则取值（比如
table { border: 0.5px }，td { border: 1px }，交界仍显示 1px）
三处边框必须完全一致才能出纤细效果
只给 table 设边框 → 只有外框；只给 th/td 设 → 外框可能断裂。要稳定出细线，得同步写：
table, th, td { border: 0.5px solid rgba(0, 0, 0, 0.15); }table { border-collapse: collapse; }-
table { border-spacing: 0; }（显式声明防误配）
注意点：
-
0.5px在现代浏览器支持 subpixel 渲染，比1px更稳，尤其在高缩放屏（如 Windows 125%、Mac Retina）下 - 颜色别用纯灰如
#ddd，容易淹没文字；rgba(0, 0, 0, 0.15)控制视觉重量更可靠 - 如果用了 Bootstrap 或 Ant Design，它们常重置
border-collapse为separate，得用开发者工具检查 computed 样式，必要时加!important覆盖
第三方框架或旧代码干扰时怎么排查
常见干扰源：
- 框架 CSS 选择器权重更高（比如
.table td覆盖了你的td） - HTML 属性残留：
cellspacing="2"或border="1"会触发 UA 默认行为，需用 CSS 强制覆盖：table[border] { border-collapse: collapse !important; } -
border-style: dotted或groove自带厚度，压不到细线，一律换solid
真正让细线“站得住”的，从来不是调几个像素，而是 border-collapse: collapse 是否生效、三处边框是否完全一致、颜色透明度是否适配背景与文字——漏掉任意一点，0.5px 就会退化成一抹模糊的灰影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
