如何让 HTML 表格外边框颜色不被单元格（td）边框覆盖-html教程-PHP中文网

如何让 HTML 表格外边框颜色不被单元格（td）边框覆盖

通过设置 border-collapse: collapse 可解决表格外边框被 td 边框覆盖的问题，使 table 的 border 样式真正生效，同时保留内部单元格的边框样式。

通过设置 `border-collapse: collapse` 可解决表格外边框被 td 边框覆盖的问题，使 table 的 border 样式真正生效，同时保留内部单元格的边框样式。

在 HTML 表格中，默认的边框模型是 border-collapse: separate（即“分离边框”），这意味着 <table>、<code><tr>、<code><td> 各自的边框独立渲染，且相邻边框之间存在间距（由 <code>border-spacing 控制）。此时，即使你为 <table> 设置了 <code>border，它也仅作用于表格最外层的“包裹框”，而 <td> 的边框会紧贴其内容区域绘制——视觉上，td 的左/上/右/下边框会直接“延伸到”表格边缘，导致 table 的外边框被遮盖或不可见。<p>✅ 正确解法是启用 <strong><code>border-collapse: collapse：

.table_1 {
  border: 2px solid black;        /* 外边框：生效！ */
  border-collapse: collapse;     /* 关键：合并所有边框 */
}

.td_table {
  border: 1px solid #B5B5B5;      /* 单元格边框：仍生效，但与 table 边框融合 */
  padding: 8px;
}

配合 HTML 使用：

Cell 1

Cell 2

Cell 3

Cell 4

? 原理说明：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

border-collapse: collapse 会将相邻的边框（如 table 与第一行 td 的上边框、td 与 td 之间的左右边框）合并为一条共享边框；
表格整体外边框（table { border }）将作为“最外层轮廓”优先渲染；
内部单元格边框则参与合并计算，但不会覆盖 table 的 border 定义——CSS 会依据边框宽度、样式、颜色的层叠规则自动选择最终显示效果（通常宽者优先，同宽时按 CSS 特异性决定）。

⚠️ 注意事项：

移除所有 !important 强制声明——它在此场景中无效且干扰可维护性；
不要依赖 max-height 在 <tr> 上（HTML 中无效属性），如需控制高度，请用 <code>tr { height: 35px } 或 td { line-height: 35px }；
若需保留一定间距（如模拟 separate 效果但又想突出 table 边框），可改用 outline + outline-offset 模拟外边框，但推荐坚持 collapse 方案以保证语义与兼容性。

✅ 总结：border-collapse: collapse 是控制表格边框层级关系的核心 CSS 属性。正确使用它，无需 hack、无需 !important，即可清晰分离“表格容器边框”与“单元格分隔边框”的视觉职责。