frame属性仅控制table外边框显示哪几条边,不控颜色、粗细、样式,也不影响内部线;设frame="void"仍见外框主因是css border规则使其失效。

别用 frame 属性设置外围边框——它只决定“画哪几条线”,不控制颜色、粗细、圆角,且和 CSS 冲突时直接失效。
为什么设了 frame="void" 还能看到外框?
常见现象是:明明写了 <table frame="void">,页面上外框还在。这不是浏览器 bug,而是你同时写了 <code>border 属性或用了 CSS border 规则。
-
frame和border属性互斥:如果 HTML 中同时存在border="1"和frame="void",frame会覆盖border的默认四边行为,外框应消失 - 但只要存在任何 CSS
table { border: ... },frame就完全被忽略——浏览器优先走 CSS 渲染路径 - IE 会错误地把
frame应用到内部单元格边框上(其他浏览器不会),进一步加剧调试混乱
frame 支持哪些值?语义容易误解
它的取值全是固定字符串,不是缩写也不是方向描述,拼错就无效:
-
hsides→ 只画 top + bottom 边框(不是“水平线”,是“horizontal sides”) -
vsides→ 只画 left + right 边框(不是“垂直线”,是“vertical sides”) -
lhs/rhs→ 左/右边框(不是left/right,拼成那样无效) -
above/below→ 单独上/下边框(top/bottom不是合法值) -
void→ 彻底不画外框(但如上所述,CSS 存在即失效)
现代项目里怎么真正控制外边框?
用 CSS,且必须配合 border-collapse 才能避免内线干扰:
- 要只显外框、隐藏所有单元格分隔线:
table { border-collapse: collapse; border: 1px solid #333; }<br>table td, table th { border: none; } - 要只留顶部 + 右侧边框:
table { border-top: 1px solid #000; border-right: 1px solid #000; border-left: none; border-bottom: none; } - 想加圆角?
frame完全做不到;CSS 可直接写border-radius: 4px - Vite、Webpack 等构建工具可能在 HTML 压缩阶段直接剔除
frame属性,老代码上线后莫名失效
真正容易被忽略的点是:当你在调试一个遗留表格时,看到 frame 和 border 同时存在,不要假设它们叠加——它们是互斥指令,最终表现取决于浏览器解析顺序和是否启用 CSS。一旦有哪怕一行 table { border: ... },frame 就形同虚设。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











