表格边框看起来像双线是因为默认border-collapse: separate导致单元格边框独立显示且叠加；必须将border-collapse: collapse设在table元素上，并统一设置table、th、td的border样式才能实现单线效果。

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

你给 table、th、td 都写了 border: 1px solid #000，结果边框粗得离谱——这不是 bug，是浏览器默认的 border-collapse: separate 在作祟。每个单元格自带独立边框，加上默认的 border-spacing（通常为 2px），相邻边框不合并，视觉上就是两条线叠在一起。

• border-collapse: collapse 必须加在 table 元素上，不能只写在 th 或 td 上
• 旧式写法如 cellspacing="0" 只能消除间距，无法解决边框重叠问题
• 如果同时用了 HTML 的 border 属性（如 <table border="1">）和 CSS 边框，会叠加干扰，建议彻底弃用 HTML <code>border 属性

  最简可靠的单线边框写法

  别绕弯子，直接用这套组合：

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

  • border-collapse: collapse 是核心，它让相邻单元格的边框“吸”成一条线
  • th 和 td 必须都设 border，否则表头或数据单元格会漏边
  • 如果只要外边框、不要内线，就只给 table 设 border，不给 th/td 设——但这时就不是“单线表格”，而是“带外框的空白容器”

  想加圆角或阴影？注意 overflow 隐藏

  给 table 加 border-radius 时，如果不配 overflow: hidden，圆角会被单元格内容撑破，尤其在有 padding 或文字溢出时。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  table {
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden; /* 关键！否则圆角无效 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  • border-radius 对 table 生效的前提是：它必须是块级元素（默认就是），且没有 border-collapse: separate
  • overflow: hidden 不仅封住圆角，还能裁掉 box-shadow 溢出部分，让效果干净
  • 别试图给 th 或 td 单独加 border-radius——它们在 collapse 模式下不响应圆角

  不同边框样式怎么单独控制？

  需要顶部加粗、右侧虚线、底部双线？靠 border-top、border-right 等单边属性，配合伪类精准定位。

  /* 第一行表头顶部加粗 */
  th:first-child {
    border-top: 2px solid #333;
  }
  <p>/<em> 最后一列右侧加虚线 </em>/
  td:last-child,
  th:last-child {
  border-right: 1px dashed #999;
  }</p><p>/<em> 底部行整体加双线 </em>/
  tr:last-child td {
  border-bottom: 3px double #666;
  }</p>

  • 伪类如 :first-child、:last-child、:nth-child(odd) 要作用在 th/td 上才有效，对 tr 用容易受空单元格干扰
  • 避免在 table 上用 border-bottom 代替行底边——它只画在外围，不参与单元格对齐
  • 如果用了 border-collapse: collapse，border-spacing 就完全失效，别再尝试用它调间隙

  实际项目里最容易被忽略的，是 border-collapse 的继承性和重置成本：一旦你在某个组件里用了 collapse，后续所有嵌套表格若没显式声明，都会沿用这个行为——而某些第三方 UI 库（比如老版本 Bootstrap Table）可能依赖 separate 模式，强行覆盖反而引发错位。动手前先查查父级样式。

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