答案：表格边框“双线糊成一片”是因浏览器默认border-collapse: separate，使th/td独立边框叠加且受border-spacing: 2px影响；必须在table元素上设置border-collapse: collapse，并统一声明table、th、td的border才能实现干净单线。

为什么表格边框总是“双线糊成一片”？

根本不是你写的 border 太多，而是浏览器默认用 border-collapse: separate 渲染表格——每个 th 和 td 都自带独立边框，再叠上默认 border-spacing: 2px，相邻单元格的右/左边框就并排挤在一起，视觉上粗、虚、发灰。哪怕只给 td 加 1px solid #ccc，也大概率出双线。

必须在 table 元素上写死：border-collapse: collapse。写在 th 或 td 上无效，用 cellspacing="0" 也救不回来。

• border-collapse: collapse 是唯一能真正“吸合”相邻边框的开关
• 删掉所有 HTML 的 border 属性（如 ），它和 CSS 边框会叠加干扰
  如果用了 Bootstrap 或其他 UI 框架，检查是否被其 table-bordered 类覆盖，优先用更高优先级选择器重置

  怎么写出干净单线边框？最简可靠写法

  别绕弯子，直接用这套组合，覆盖 95% 场景：

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

  注意三个硬性条件：

  • th 和 td 必须都设 border，漏掉任一者，对应区域就会“断线”
  • 不要只给 table 设 border——那只是外框，内部仍是空白网格
  • 若要外框加粗（比如 2px），单独给 table 加 border 即可，它会包在已合并的内线之外，不破坏网格结构

  加圆角和阴影时，为什么边框总“顶破”角落？

  border-radius 对 table 元素本身有效，但内部 th/td 的边框在 collapse 模式下会撑出圆角区域，导致视觉断裂。这不是 bug，是盒模型裁切没跟上。

  必须配齐三件套：

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

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

  • overflow: hidden 不仅封住圆角，还能裁掉 box-shadow 溢出部分，让效果干净
  • 别给 th 或 td 单独设 border-radius——它们在 collapse 下不响应
  • 如果表格内容可滚动，box-shadow 会随内容移动；固定表头时，需给 thead 单独加 z-index 和 background-clip: padding-box

  隔行变色和悬停效果，为什么斑马纹错位或卡顿？

  常见错误是把 :nth-child(even) 直接套在 tr 上，但忽略了 thead 和 tfoot 也会被计入计数，导致变色从第二行开始偏移。

  正确写法限定在主体数据区：

  tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  悬停时也别碰 border：

  • 直接改 border 会触发 layout reflow，大表格滚动明显卡顿
  • 用 outline 更轻量：tr:hover td { outline: 2px solid #3498db; }（但不支持圆角）
  • 或用 box-shadow 模拟内嵌高亮：tr:hover td { box-shadow: inset 0 0 0 2px #3498db; }，注意 padding 偏移需微调

  真正难的不是写对一行 border，而是搞清哪一层 CSS 正在偷偷覆盖你写的那条线——尤其是当表格嵌在框架里，或者父容器有 overflow-x: auto 时，overflow: hidden 可能被继承干扰，圆角就又失效了。

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