表格边框不显示的根本原因是border-collapse默认为separate导致边框分离且受border-spacing影响，或未正确配对设置table与单元格的border属性；启用collapse需同时设置table、th、td的border，并排查overflow隐藏、样式覆盖及col元素干扰。
表格边框不显示，绝大多数情况不是 HTML5 不支持 <table>，而是 CSS 的 border-collapse 和 border 属性没配对生效。
为什么设置了 border 却看不到边框？
根本原因是：浏览器默认给 <table> 应用了 border-collapse: separate（分离边框模型），此时单元格各自有边框，但相邻边框之间存在间距（border-spacing），视觉上容易“断开”或被忽略；更关键的是，如果只给 <td> 或 <th> 设 border，而没给 <table> 本身设，且 border-collapse: collapse 没启用，边框可能因盒模型叠加或优先级问题被覆盖或抵消。
-
border-collapse: separate（默认）→ 单元格边框独立，受border-spacing影响，border必须显式设在<td>/<th>上才可见 -
border-collapse: collapse→ 合并相邻边框为一条线，此时给<table>或任意单元格设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; }临时验证） - 表格里混用了
<colgroup>或<col>，而它们不支持border，也不能触发边框合并逻辑 - 使用了
display: table-cell模拟表格布局，但该 display 值不响应border-collapse（只有真实<table>元素才支持）
最小可靠写法（带边框的 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
调试建议：快速定位边框消失环节
打开浏览器开发者工具，按顺序检查：
- 选中
<table>元素 → 在 Styles 面板确认border-collapse计算值是否为collapse - 展开
<td>→ 查看 Computed 中border-top-width等是否为0px，以及是否有border-style: none覆盖 - 搜索全局 CSS 中是否出现
table, td, th { border: 0; }或border: initial类似重置规则
边框问题几乎从不源于 HTML5 标准变更，而在于 CSS 层级、继承和盒模型细节。最容易被忽略的是：你看到的“没边框”，其实是多层 border 因 collapse 或 separate 行为相互抵消或隐藏了。
