如何在HTML表格中通过all属性快速清除表格所有默认样式-html教程-PHP中文网

对table用all: unset会清除display: table导致布局塌陷，正确做法是手动补回display及border-collapse等关键属性；all: revert在table上基本无效，应改用all: initial配合显式声明。

如何在html表格中通过all属性快速清除表格所有默认样式

直接对 `table` 元素用 `all: unset` 会丢掉 `display: table`

这是最常踩的坑：浏览器默认给 table 设了 display: table，但 all: unset 会把它也清掉，结果表格塌陷成 inline 元素，单元格错位、边框消失、宽高全乱。你看到的“没效果”或“布局崩了”，八成是这个原因。

正确做法是手动补回 display 和关键渲染属性：

table { all: unset; display: table; border-collapse: separate; }
td, th { all: unset; display: table-cell; text-align: left; vertical-align: middle; }
tr { all: unset; display: table-row; }
别对 thead/tbody/tfoot 单独设 all: unset——它们默认就是 display: table-header-group 等，清了反而难恢复

`all: revert` 在 `table` 上基本无效

all: revert 意图恢复浏览器原生样式，但对 table 类元素支持极差：Chrome 和 Firefox 都不识别它在 table、td 上的行为，Safari 更是直接忽略。你写上去，样式不会变，控制台也不会报错，纯属“静默失效”。

真想退回到原生表现，老实用 all: initial + 显式声明关键属性更可靠：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

table { all: initial; display: table; width: auto; }
td, th { all: initial; display: table-cell; padding: 2px; }
注意：initial 会让 border-collapse 变成 separate（非合并边框），如果设计依赖 collapse，必须显式写上

真正要重置的，其实是 `border` 和 `cellspacing/cellpadding` 行为

表格最难搞的不是结构，而是老式 HTML 属性遗留问题：cellspacing 和 cellpadding 已被 CSS 替代，但浏览器仍按旧逻辑解析。比如 <table cellspacing="0"> 在现代 CSS 下会被忽略，除非你用 <code>border-collapse: collapse + border-spacing: 0 显式覆盖。

推荐组合写法（兼容性好、意图清晰）：

table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0.5em; margin: 0; } —— 不靠 all，只动实际影响布局的属性
清除 caption 默认居上和字体加粗：caption { all: unset; display: table-caption; text-align: center; font-weight: normal; }