table默认边框和间距在Chrome/Firefox/IE中表现不同：Chrome和Firefox默认border-collapse: separate、border-spacing: 2px，IE/Edge旧版可能忽略border-spacing或强制collapse，导致布局不一致；需显式设置table{border-collapse:collapse;border-spacing:0}，且th/td需统一padding和vertical-align，caption也常被Reset忽略而需手动补全。
table 默认边框和间距在 Chrome/Firefox/IE 中表现不同
Chrome 和 Firefox 默认用 border-collapse: separate，border-spacing: 2px；IE/Edge 旧版可能忽略 border-spacing 或强制 collapse。结果就是：没加 Reset 时，同一张表在 Chrome 里“松散”，在 IE 里“贴死”，列宽、行高全乱套。
直接写 table { border-collapse: collapse; border-spacing: 0; } 最快见效。别依赖 Eric Meyer Reset 的全局重置——如果你只引入了部分样式，漏掉这一条，问题照旧。normalize.css 不动 border-collapse，它只修继承行为，所以你必须自己补。
常见错误现象：<table><tr><td>A</td><td>B</td></tr></table> 在 Firefox 看着有缝，在 Safari 看着像一块板子，就是这个原因。
th/td 的 padding 和 vertical-align 没被任何主流 Reset 统一
th 和 td 的默认 padding 差得离谱：Chrome 是 ~1px，Firefox/Safari 是 0.5em–1em；vertical-align 虽然规范写的是 middle，但旧版 IE 实际 fallback 到 baseline，文字就悬在单元格底部。
立即学习“前端免费学习笔记（深入）”；
必须显式声明：th, td { padding: 8px; vertical-align: top; }。别用 all: unset 清表格单元格——它会把 vertical-align 重置回 baseline，不手动设回来，对齐就崩。
使用场景：后台管理系统表格、数据报表导出 HTML 版本、邮件模板内嵌表格——这些地方对齐和留白敏感，靠浏览器默认值等于裸奔。
caption 元素被几乎所有 Reset 文件忽略
caption 默认是块级、居中、带上下 margin，但 Eric Meyer、YUI、甚至多数自定义 Reset 都没把它写进选择器。结果：Firefox 给 margin-top: 0.67em，Chrome 给 1em，Safari 有时还换行错位。
检查你用的 Reset 文件，搜 caption——如果没出现，立刻补上：caption { margin: 0.67em auto; text-align: center; display: table-caption; }。别只写 text-align: center，IE 会当它是 inline 元素撑开宽度；display: table-caption 才保语义和盒模型正确。
容易踩的坑：用 display: grid 或 flex 模拟表格布局时，caption 失去语义，Reset 完全失效，此时只能靠 JS 或 aria-label 替代。
响应式表格在 Reset 后仍需单独适配
Reset 解决的是初始样式，不是响应行为。比如给 table 加 width: 100% 后，在小屏上横向溢出，这跟 Reset 无关，是表格自身特性决定的。
实操建议：
- 小屏下用 overflow-x: auto 包一层容器，比强行缩放字体更可靠
- 避免在 table 上直接设 max-width，它对 table-layout: auto 无效，要配合 table-layout: fixed 和显式 width 才生效
- 如果用 JS 动态生成表格，注意 Safari 对 offsetWidth 的读取时机——页面未完全可见时可能返回 0，导致后续计算错乱
最隐蔽的问题：Reset 之后你以为万事大吉，结果用户用 Safari 打开，表格列宽忽大忽小，其实是 table-layout 没设，浏览器按内容自动算列宽，而各引擎算法不一致。
