细线边框的核心是border-collapse: collapse必须写在table元素上，否则浏览器默认separate模式导致相邻单元格边框叠加成粗线或双线；需三步协同：table{border-collapse:collapse}、table{border:1px solid #333}、th,td{border:1px solid #333}，且border-spacing在collapse下完全失效。
细线边框不是靠“调小 border-width”就能实现的，核心是 border-collapse: collapse 必须生效，且必须写在 table 元素上——漏掉这一步，其他所有设置基本白忙。
为什么写了 border: 1px solid #000 还是粗线或双线？
浏览器默认用 border-collapse: separate，table、th、td 各自画自己的 1px 边框：左边单元格的右框 + 右边单元格的左框 = 视觉上 2px 粗线，中间还夹着默认 border-spacing: 2px 的缝隙。你看到的“粗”，其实是两套边框在打架。
常见错误包括：
- 只给
table设border，结果只有外框，内部没线 - 给
th和td都加了border，却漏掉border-collapse: collapse - 把
border-collapse: collapse写在tr或th上——它只对table元素生效，写错位置完全无效
border-collapse: collapse 必须和哪些样式配对才有效？
这个属性不是“锦上添花”，而是细线边框的前提开关。关不上它，其他都白搭。正确三步缺一不可：
-
table { border-collapse: collapse; }—— 合并所有相邻边框，废掉border-spacing -
table { border: 1px solid #333; }—— 控制外边框（可选但建议） -
th, td { border: 1px solid #333; }—— 控制内边框，值必须和外边框一致；若th设2px而td是1px，交界处会视觉加粗
注意：border-spacing 在 collapse 模式下被完全忽略，别浪费时间设 border-spacing: 0。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
高 DPI 屏幕下怎么让边框真正“更细”？
在 Retina 屏、Windows 缩放 125% 等场景下，border: 1px solid 可能渲染成 1.25px 或更粗。真要压到视觉最细，得靠两个实际有效的手段：
- 用
border: 0.5px solid #000—— Chrome/Edge/Firefox 都支持 subpixel 边框，比 1px 更纤细 - 配合
color: rgba(0,0,0,0.7)降低对比度，削弱视觉重量（比硬调粗细更稳妥） - 避免用
border-style: double或groove，这些样式自带厚度，没法变细
另外，如果表格意外收缩，大概率是漏了 width: 100% 或 min-width: fit-content；小屏横向溢出，则需额外加 table { display: block; overflow-x: auto; }。
最容易被忽略的是：第三方 CSS 框架（比如 Bootstrap）可能重置了 border-collapse 值，上线前务必检查 computed styles 中 table 的实际值是否为 collapse。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
