html表格本身兼容性极好，问题几乎全出在css样式、属性滥用或dom操作上；border-collapse在ie8–ie11中行为不一致，需给table显式声明border（如transparent）才能确保collapse生效，否则退回到separate导致双线错乱。
HTML表格本身兼容性极好，问题几乎全出在CSS样式、属性滥用或DOM操作上——不是表格不兼容，是写法踩了浏览器解析的边界。
table元素本身没兼容问题，但border-collapse在IE8–IE11中行为不一致
现代浏览器里border-collapse: collapse会让相邻边框合并为一条线；但在IE8–IE11中，如果table没设border，或td单独设了border但table没设，IE会忽略collapse，退回到separate模式，导致双线边框、间距错乱。
- 必须给
table显式声明border（哪怕只是border: 1px solid transparent） - 避免只给
td设border而漏掉table的border声明 - IE11不支持
border-collapse: collapse与empty-cells: hide联用——空单元格仍占位，建议改用visibility: hidden手动控制
colgroup + col宽度控制在Firefox和旧Edge中容易失效
col标签本意是定义列宽，但Firefox（直到120版）和Edge Legacy对width属性的支持不稳定：当table设了width: 100%，又用col设固定像素宽，Firefox可能完全忽略col，转而按内容撑开列宽。
- 优先用
min-width+max-width替代单纯width，Firefox对这两者更可靠 - 若需精确列宽，给
th/td加width并配合table-layout: fixed（注意：IE8+支持，但必须table有明确width值） - 不要依赖
col做响应式列宽切换——JS动态改col.style.width在IE11中常不触发重绘，改用td类名切换更稳
display: table-cell模拟表格布局时，IE11不支持vertical-align: baseline
用div加display: table-cell实现等高布局很常见，但在IE11中vertical-align: baseline会失效，所有单元格默认顶对齐，且无法通过line-height或padding微调对齐位置。
- IE11中只认
vertical-align: top/middle/bottom，baseline会被忽略并退化为top - 若需基线对齐，改用Flexbox（IE11支持
display: flex），或用position: relative+transform: translateY()手动偏移 - 别在同一个容器里混用
display: table-cell和display: flex——IE11解析顺序混乱，可能导致子元素尺寸计算错误
表格内input聚焦时，Safari 16.4+ 和 Firefox 的scrollIntoView行为不同
点击表格某行的input后调用el.scrollIntoView()，Safari会滚动到该input顶部边缘，Firefox则滚动到视口中心——这在长表格中造成定位偏差，尤其当表格被overflow: auto容器包裹时。
- 统一用
el.scrollIntoView({ block: 'nearest', inline: 'nearest' })，Safari和Firefox都支持，且行为一致 - 避免依赖
scrollIntoView(true)（已废弃），它在Firefox中表现不可控 - 如果表格容器用了
transform（如缩放或平移），scrollIntoView在Safari中可能完全失准——此时必须用container.scrollTop += offset手动计算滚动距离
真正卡住调试的，往往不是table标签本身，而是你给它加的那条border、那个col、或一行scrollIntoView调用。先确认渲染模式是Standards，再查CSS规则是否被浏览器悄悄忽略——很多“不兼容”其实是规则压根没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
