直接写 border="1" 不等于有内边框,它仅标识表格语义;真正显示内边框需三者协同:table 设 border-collapse: collapse,且 th/td 显式声明含宽度、样式、颜色的完整 border。

为什么直接写 border="1" 不等于有内边框
它只是告诉浏览器“这是数据表”,不控制任何单元格内部线条。你看到的“内线”其实是浏览器默认给 th 和 td 加的 UA 样式,行为不可控:Chrome 可能画断续线,Firefox 可能只画外框,Safari 甚至省略部分线。这不是 bug,是规范允许的自由实现。
border-collapse: collapse 必须配合 th、td 的 border 才生效
只给 table 写 border,顶多有个外框;没给 th 和 td 设边框,内部就是空白。真正显示内边框,靠的是三者协同:
-
table上必须写border-collapse: collapse(不能写在th或td上) -
th和td必须显式声明border,比如border: 1px solid #ccc - 如果只设
table { border: 2px solid #000 },而th/td没边框,那只有外框,没有内分隔线
border 三要素缺一不可:宽度、样式、颜色
常见失效写法:border: 1px;、border: solid;、border-color: #f00;——这些都不显示边框,因为浏览器默认 border-style 是 none,写了宽度或颜色但没样式,就等于没设。
正确写法示例:
立即学习“前端免费学习笔记(深入)”;
th, td {
border: 1px solid #666; /* ✅ 完整三要素 */
border: 2px dashed #007bff; /* ✅ 虚线内边框 */
border: 0.5px dotted #999; /* ✅ 细点线,注意小数像素支持有限 */
}注意:border-style 不能省,solid、dashed、dotted、double 都可选,但必须明确写出。
想让某几列/某几行边框不同,别碰 tr 的 border
tr 元素本身不渲染边框(CSS 规范限制),给它加 border 没效果。要高亮某行,得写:
tr:nth-child(2) td { border-top: 2px solid blue; border-bottom: 2px solid blue; }td:first-child { border-left: 3px double #e74c3c; }th:last-child, td:last-child { border-right: 1px dashed #aaa; }
所有边框操作都落在 th 和 td 上,tr 只用来做选择器容器。
实际用的时候,最容易漏掉的是给 th 和 td 同时设 border,或者忘了 border-style 这个关键项——这两点一错,内边框就彻底消失,不是“没生效”,是根本没被解析。



















