只写 border-width 不显示粗边框是因为浏览器默认 border-style 为 none,需显式设置 solid 等样式;border-collapse: collapse 下应优先给 table 设 border 或用方向性 border-width 配合 border-style。

直接设 border-width 很可能没效果——因为缺了 border-style,或者被 border-collapse: collapse 吃掉了。
为什么只写 border-width 不显示粗边框?
浏览器默认给 table、td、th 的 border-style 是 none。宽度再大,样式为 none 就等于没边框。这不是 bug,是 CSS 规范行为。
- 写了
border-width: 3px却看不到边框?先查 computed 样式里的border-top-style,不是只看border-top-width - 某些重置库(如 normalize.css)甚至把
border-style设成hidden,比none还彻底,连宽度都不认 - 临时验证:加一句
border-style: solid !important,如果边框立刻出现,就坐实是 style 被覆盖了
border-collapse: collapse 下怎么稳稳加粗外边框?
绝大多数表格用了 border-collapse: collapse,这时相邻单元格的边框会合并,你设在 td 上的 border-width 可能被“覆盖优先级更高”的那条边压住——比如两个 td 水平相邻,右边 td 的左 border 和左边 td 的右 border 合并后,只显示其中一条。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 真正起效的加粗方式:给
table元素自己加border,例如table { border: 3px solid #000; } - 再配合
td, th { border: 1px solid #000; }控制内线,避免内外都粗得糊成一团 - 如果只要左/上/右/下某一边更粗,用方向性写法:
td { border-left-width: 3px; },但必须确保border-left-style: solid已存在
想统一加粗所有单元格边框,但又怕合并后失效?
别依赖 table 的 border,直接对每个单元格下手,但要绕开 collapse 的干扰逻辑。
- 推荐写法:
td, th { border: solid #000; border-width: 2px 1px 1px 2px; }——这样外侧边(左、上)更粗,内侧(右、下)细,视觉上既突出轮廓又不显臃肿 - 最后一行加粗底边:
tr:last-child td { border-bottom-width: 2px; } - 表头第一列加粗左边:
th:first-child { border-left-width: 3px; } - 注意顺序:必须先有
border-style(哪怕写在前面或用简写),否则border-width被忽略
移动端或高 DPI 屏上边框粗细不准怎么办?
写死 1px 在 retina 屏可能渲染成 2 物理像素,显得过粗;写 0.5px 又在旧版 Safari 不支持。
- 稳妥替代方案:
box-shadow: 0 0 0 0.5px #000,兼容性好,且不受border-collapse影响 - 响应式需求可用
clamp():border-width: clamp(1px, 0.08vw, 2px),但需确认目标环境支持 - 慎用
transform: scaleY(0.5)模拟细边框——它只适用于单边,且可能影响文字对齐或触发重排
最常被跳过的动作:改完 border-width 后没检查 border-style 是否还活着。collapse 模式下,边框不是“加粗”,而是“争夺控制权”。真要调粗细,得先抢回定义权。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










