表格边框不显示的根本原因是border-collapse默认为separate导致边框分离且受border-spacing影响，或未正确配对设置table与单元格的border属性；启用collapse需同时设置table、th、td的border，并排查overflow隐藏、样式覆盖及col元素干扰。
表格边框不显示，绝大多数情况不是 HTML5 不支持 <table>，而是 CSS 的 <code>border-collapse 和 border 属性没配对生效。
为什么设置了 border 却看不到边框？
根本原因是：浏览器默认给 <table> 应用了 <code>border-collapse: separate（分离边框模型），此时单元格各自有边框，但相邻边框之间存在间距（border-spacing），视觉上容易“断开”或被忽略；更关键的是，如果只给 <td> 或 <code><th> 设 <code>border，而没给 <table> 本身设，且 <code>border-collapse: collapse 没启用，边框可能因盒模型叠加或优先级问题被覆盖或抵消。
-
border-collapse: separate（默认）→ 单元格边框独立，受border-spacing影响，border必须显式设在<td>/<code><th> 上才可见 <li> <code>border-collapse: collapse→ 合并相邻边框为一条线，此时给<table> 或任意单元格设 <code>border都可能生效，但必须确保没有其他样式重置它 - 常见干扰：重置 CSS（如某些 UI 框架、normalize.css）会把
table的border设为none，或把border-collapse强制设为separate - 父容器或祖先元素设置了
overflow: hidden，且表格内容溢出时裁剪了边框区域 - CSS 选择器权重不够，被更高优先级规则覆盖（比如用
table { border-collapse: collapse !important; }临时验证） - 表格里混用了
<colgroup></colgroup>或<col>，而它们不支持border，也不能触发边框合并逻辑 - 使用了
display: table-cell模拟表格布局，但该 display 值不响应border-collapse（只有真实<table> 元素才支持） <h3>最小可靠写法（带边框的 HTML5 表格）</h3> <p>以下代码可直接复制验证，不依赖外部样式：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1455" title="Pebblely"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680147771072.jpg" alt="Pebblely" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1455" title="Pebblely">Pebblely</a> <p>AI产品图精美背景添加</p> </div> <a href="/ai/1455" title="Pebblely" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid #333; }</pre> <p>注意三点：</p> <ul> <li>必须同时给 <code>table、th、td设border，否则在collapse模式下可能只显示部分边框（比如只有外框，无内线） - 不要只写
table { border: 1px solid #333; }—— 这只会画外边框，单元格之间依然没线 - 如果只需要外边框，改用
border-collapse: separate并配合border-spacing: 0，再仅给table设border - 选中
<table> 元素 → 在 Styles 面板确认 <code>border-collapse计算值是否为collapse - 展开
<td> → 查看 Computed 中 <code>border-top-width等是否为0px，以及是否有border-style: none覆盖 - 搜索全局 CSS 中是否出现
table, td, th { border: 0; }或border: initial类似重置规则
border-collapse: collapse 不生效的典型原因
即使写了 border-collapse: collapse，边框仍不显示，往往卡在这几个点：
调试建议：快速定位边框消失环节
打开浏览器开发者工具，按顺序检查：
边框问题几乎从不源于 HTML5 标准变更，而在于 CSS 层级、继承和盒模型细节。最容易被忽略的是：你看到的“没边框”，其实是多层 border 因 collapse 或 separate 行为相互抵消或隐藏了。
