border-collapse: collapse 是必须的，因为默认 separate 模式会导致单元格间出现白缝或双线，只有 collapse 才能使相邻边框合并为一条连续细线。

为什么 border-collapse: collapse 是必须的

默认情况下，HTML表格的边框是「分离式」的（border-collapse: separate），单元格之间有间隙，即使设了 1px solid 也会出现双线、白缝或粗边——这不是细线，是视觉干扰。只有切换为 collapse，才能让相邻边框合并成一条线，真正实现「细」和「连续」。

实操建议：

• 必须在 <table> 元素上设置 <code>border-collapse: collapse，不能只设 td 或 th
• 配合 border-spacing: 0（虽在 collapse 下无效，但显式写上更稳妥）
• 避免对 tr 单独设边框——它不渲染边框，设了也无效

border 写在哪？优先级和继承陷阱

细线效果成败取决于边框定义的位置和层级。常见错误是只给 td 加 border，结果表头 th 没边、外边框缺失、或左右列重叠加粗。

推荐写法（兼顾结构与控制力）：

• 给 table 设外边框：border: 1px solid #ccc
• 给 td, th 统一设内边框：border: 1px solid #ccc
• 不要用 border-bottom + border-right 拆开写——容易漏掉角落，且 collapse 下会重复叠加
• 如果要区分表头/数据行颜色，改用 th 单独覆盖 border-color，而非删掉边框

像素级发虚？别碰 border-width: 0.5px

很多开发者想「更细」，尝试 0.5px 或 thin，结果在多数屏幕（尤其非 Retina）上渲染为 1px 或直接糊掉——CSS 像素不支持亚像素边框的可靠渲染。


HTML Extract
使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
下载

真正可控的方案：

• 坚持用 1px，但选浅灰（如 #e0e0e0）降低视觉重量
• 用 box-shadow: 0 0 0 1px #e0e0e0 模拟「细线」，兼容性好且不占布局空间
• 避免在缩放率非 100% 的浏览器中测试——此时 1px 可能被渲染为 2 物理像素，显得粗

响应式表格里细线突然断开？检查 overflow 和 min-width

当表格内容撑宽、触发横向滚动时，overflow-x: auto 容器常导致边框在滚动边界处被裁切，看起来像「断线」；或者小屏下 td 内容换行，撑高行高后，上下边框间距变大，细线感消失。

应对方式：

• 给容器设 overflow-x: auto 同时，确保 table 有 min-width: min-content，防止强制压缩
• 用 white-space: nowrap 控制关键列不换行（如 ID、时间戳）
• 若必须换行，改用 border-bottom 配合 padding-bottom 模拟「底线」，比全边框更稳定

细线不是靠调小数值实现的，而是靠合并、统一、克制——少一层规则，就少一个断点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！