html表格边框需通过border-collapse: collapse合并单元格边框，否则默认separate模式下相邻单元格边框叠加形成双线；统一单线边框应设table{border-collapse:collapse}及td,th{border:1px solid #ddd}。

HTML表格边框不是靠border属性“加”出来的，而是靠border-collapse“理顺”出来的。不设border-collapse: collapse，哪怕只给td加border，也大概率出现双线、错位或粗边现象。

为什么表格边框总是看起来像双线？

浏览器默认用border-collapse: separate渲染表格，每个td和th自带独立边框，且单元格之间还有border-spacing（默认 2px）。结果就是：相邻单元格的右边框 + 右侧单元格的左边框 = 视觉双线。

• 只给table设border，td没边框 → 外框有，内格无，像空心框
• 同时给table、td、th设border但没border-collapse → 边框堆叠，粗得离谱
• border-collapse: collapse必须写在table上，对td或th写无效

如何统一设置单线边框（最常用场景）

目标是每个单元格交界处只有一条清晰边框，且外轮廓完整。关键不是“加多少边框”，而是“合并哪些边框”。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 在table上声明border-collapse: collapse
• 只给td和th设border，不要给table设（除非你要额外外框）
• 推荐写法：

  table { border-collapse: collapse; }
  td, th { border: 1px solid #ddd; padding: 8px; }

• 若需外边框加粗，单独给table加border，它会包在已合并的内边框之外，不会干扰网格

去掉边框时为什么border: none经常失效？

模板（如 Bootstrap）或框架常通过高优先级选择器设置border，仅靠td { border: none }会被覆盖。更麻烦的是，有些样式只作用于th的border-bottom，漏掉就留一条线。

• 必须匹配真实生效的选择器：用 F12 查看 computed styles，找到来源 CSS 文件和具体规则
• 稳妥清空写法：

  table.no-border, table.no-border td, table.no-border th {
    border: none !important;
    border-collapse: collapse !important;
  }

• 如果模板用了border-spacing，还需显式重置：border-spacing: 0

需要悬停/选中效果时别碰border

直接改border会触发 layout reflow，尤其在大表格里滚动卡顿明显。用outline或box-shadow替代更轻量，且不占布局空间。

• outline不参与盒模型计算，适合行级高亮：

  tr:hover td { outline: 2px solid #3498db; }

• box-shadow可模拟外发光或内嵌边框感，配合overflow: hidden还能做圆角边框效果
• 注意：outline无法设border-radius，box-shadow在td上可能因padding偏移，建议作用于tr或包裹容器

真正难的不是写对一行border，而是搞清哪一层 CSS 正在偷偷覆盖你写的那条线——尤其是当表格嵌在框架里、又套了自定义类时，!important不是万能解药，F12 的 computed tab 才是真相入口。

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