表格边框不显示的根本原因是border-collapse默认为separate导致边框分离且受border-spacing影响，或未正确配对设置table与单元格的border属性；启用collapse需同时设置table、th、td的border，并排查overflow隐藏、样式覆盖及col元素干扰。
表格边框不显示，绝大多数情况不是 HTML5 不支持 ，而是 CSS 的 border-collapse 和 border 属性没配对生效。
为什么设置了 border 却看不到边框？
根本原因是：浏览器默认给 应用了 border-collapse: separate（分离边框模型），此时单元格各自有边框，但相邻边框之间存在间距（border-spacing），视觉上容易“断开”或被忽略；更关键的是，如果只给 或 设 border，而没给 本身设，且 border-collapse: collapse 没启用，边框可能因盒模型叠加或优先级问题被覆盖或抵消。
-
border-collapse: separate（默认）→ 单元格边框独立，受 border-spacing 影响，border 必须显式设在 / 上才可见
-
border-collapse: collapse → 合并相邻边框为一条线，此时给 或任意单元格设 border 都可能生效，但必须确保没有其他样式重置它
- 常见干扰：重置 CSS（如某些 UI 框架、normalize.css）会把
table 的 border 设为 none，或把 border-collapse 强制设为 separate
border-collapse: collapse 不生效的典型原因
即使写了 border-collapse: collapse，边框仍不显示，往往卡在这几个点：
- 父容器或祖先元素设置了
overflow: hidden，且表格内容溢出时裁剪了边框区域
- CSS 选择器权重不够，被更高优先级规则覆盖（比如用
table { border-collapse: collapse !important; } 临时验证）
- 表格里混用了
border，也不能触发边框合并逻辑
- 使用了
display: table-cell 模拟表格布局，但该 display 值不响应 border-collapse（只有真实 元素才支持）
最小可靠写法（带边框的 HTML5 表格）
以下代码可直接复制验证，不依赖外部样式：
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid #333;
}
注意三点：
- 必须同时给
table、th、td 设 border，否则在 collapse 模式下可能只显示部分边框（比如只有外框，无内线）
- 不要只写
table { border: 1px solid #333; } —— 这只会画外边框，单元格之间依然没线
- 如果只需要外边框，改用
border-collapse: separate 并配合 border-spacing: 0，再仅给 table 设 border
调试建议：快速定位边框消失环节
打开浏览器开发者工具，按顺序检查：
- 选中
元素 → 在 Styles 面板确认 border-collapse 计算值是否为 collapse
- 展开
→ 查看 Computed 中 border-top-width 等是否为 0px，以及是否有 border-sty le: none 覆盖
- 搜索全局 CSS 中是否出现
table, td, th { border: 0; } 或 border: initial 类似重置规则
边框问题几乎从不源于 HTML5 标准变更，而在于 CSS 层级、继承和盒模型细节。最容易被忽略的是：你看到的“没边框”，其实是多层 border 因 collapse 或 separate 行为相互抵消或隐藏了。
|
| |
| |
新闻资讯
技术学院
le: none