CSS如何控制表格单元格边框合并_通过border-collapse实现

border-collapse属性必须设在table元素上，因它是表格级样式，对tr、td无效；设为collapse可合并相邻边框（取宽、实、后声明者），但empty-cells在collapse下失效，移动端可能渲染错位。border-collapse属性必须设在上，不是或很多人试过给 td 加 border，再设 tr 的 border-collapse: collapse，结果没用------因为 border-collapse 是表格级样式，只对 table 元素生效。常见错误现象：td 边框看起来双倍粗、有空隙、内边距撑开；或者加了 border-collapse: collapse 但完全没反应。必须写在 <table style="border-collapse: collapse"> 或对应 CSS 类里如果用了 border-spacing，它会和 border-collapse 冲突，后者优先级更高，但建议直接删掉 border-spacing 避免混淆IE8+ 支持 collapse，但 IE7 及更早只支持 separate（此时设 collapse 会被忽略）collapse模式下，相邻边框如何"合并"而不是"叠加"启用 border-collapse: collapse 后，td、th、tr 的边框不再各自渲染，而是按"边框冲突规则"合并：取宽度最大、样式最实（如 solid > dashed）、颜色优先（按声明顺序，后声明的胜出）。使用场景：想让表格看起来像 Excel 那样无缝网格，或者需要统一控制外边框粗细时。立即学习"前端免费学习笔记（深入）"； 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。