appearance属性对table元素无效，因其仅适用于表单控件类元素；清除表格默认样式应使用border-collapse: collapse、border-spacing: 0、显式设置padding/margin为0及统一font相关属性。
appearance 属性对 table 元素根本无效
直接给 table、td 或 tr 加 appearance: none 不会起任何作用——因为 appearance 只对**表单控件类元素**生效，比如 input、select、button、textarea，而表格不是表单控件，也不属于用户代理渲染为“系统控件”的范畴。W3C 规范里明确列出的可接受 appearance 的元素列表中，不包含任何表格相关标签。
表格默认样式该用什么方式清除
表格的“原生外观”其实是浏览器用户代理样式表里的默认边距、边框、间距等，和 appearance 无关，得靠传统 CSS 重置：
-
border-collapse: collapse—— 解决单元格之间双线边框问题，必须设，否则border控制不精准 -
border-spacing: 0—— 替代已废弃的cellspacing属性，清掉行/列间隙 -
padding和margin显式设为0——td、th默认有内边距，table默认可能有外边距 -
font相关属性统一重置 —— 表格文字常继承父级异常，建议显式写font-size、line-height、vertical-align
示例：
table { border-collapse: collapse; margin: 0; }
td, th { padding: 0; margin: 0; vertical-align: top; }
为什么有人误以为 appearance 能用于表格
常见混淆来源有两个：
- 把
input[type="search"]或select嵌在表格里，然后错误归因：实际生效的是对表单子元素的appearance，不是表格本身 - 看到某些 UI 框架（如 Ant Design）的“表格组件”内部用了
div模拟表格结构，此时若给这些自定义div设appearance: button等，是合法的——但那是模拟控件，不是原生table
真要控制表格视觉层级？别碰 appearance
表格的样式控制逻辑和表单完全不同：
- 想隐藏边框？用
border: none+border-collapse组合，而不是appearance - 想让
th看起来像按钮？给它加cursor: pointer和:hover样式，必要时套一层button或设role="button"，再配-webkit-appearance: none—— 这时生效对象是那个button，不是th - iOS Safari 对表格无特殊渲染干预，不存在“系统级表格控件”需要绕过，这点和
select完全不同
真正容易被忽略的是：表格没有“原生控件外观”，只有用户代理默认样式；而 appearance 的设计目标从来就不是干这个的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
