table边框重叠不生效需设border-collapse: collapse于table元素；缝隙常因padding或边框不统一导致；突出行列须操作td/th而非tr；响应式建议配合table-layout: fixed和visibility: collapse隐藏列。
table边框重叠不生效？检查border-collapse是否设为collapse
默认情况下，table的单元格边框是分离的（separate），看起来像双线或间隙明显。要让相邻边框合并成一条线，必须显式设置border-collapse: collapse，且该样式需作用于table元素本身，不是td或th。
常见错误是只写了border: 1px solid #000却没加border-collapse，或者把它写在td上——这完全无效。
-
border-collapse只能用在table元素上，对div或其他容器无效 - 如果父级有
display: inline-table，border-collapse依然有效 - IE8+ 支持，但IE7及更早版本不支持，若需兼容得用
border-spacing: 0配合separate模拟（效果有限）
为什么设置了collapse还是有缝隙？看border-spacing和padding
border-collapse: collapse会忽略border-spacing，但不会消除td或th自身的padding。视觉上的“缝隙”常常其实是内边距撑开的空白，不是边框没合并。
另一个干扰项是：当某些单元格设置了border而其他没有，浏览器会按“边框优先级”合并（比如2px覆盖1px），但若某侧无边框，就可能留白。
- 统一给所有
td、th设padding: 0再观察真实边框贴合效果 - 避免混用不同粗细/颜色的
border，尤其在colspan/rowspan场景下，合并逻辑容易出人意料 -
border-spacing在collapse模式下被强制设为0，无需手动清零
合并边框后，如何控制某一行或某一列的边框样式？
一旦启用collapse，单个单元格的border不再独立渲染，而是参与整张表的边框计算。想突出某行，不能只靠tr设border（它不生效），得从td/th入手，且需覆盖相邻单元格的同侧边框。
典型做法是：给目标行的所有单元格统一设某一边的border，同时确保上下行对应位置不设冲突边框；或者用:first-child/:last-child控制外边框。
- 给第一行加顶边框：
tr:first-child td, tr:first-child th { border-top: 2px solid #333; } - 给最后一列加右边框：
td:last-child, th:last-child { border-right: 2px solid #333; } - 不要对
tr直接设border，它在collapse下被忽略
用border-collapse时，响应式表格容易崩？注意table-layout
小屏幕下table内容溢出或错位，常和border-collapse无关，而是table-layout默认为auto，导致列宽随内容伸缩。加上table-layout: fixed能稳定列宽，但会牺牲部分自适应能力。
两者可共存：border-collapse: collapse管边框，table-layout: fixed管尺寸。不过fixed会让width百分比应用到列（col或colgroup），而不是单元格，这点容易踩空。
- 若用
table-layout: fixed，建议配合col标签定义列宽，而非只靠td的width - 移动端隐藏列时，仅用
display: none会导致collapse边框错位，应改用visibility: collapse（对tr/td都有效） -
visibility: collapse在Firefox中对td支持良好，但在Safari旧版本中可能退化为hidden
真正麻烦的是跨行跨列与边框样式的组合——rowspan单元格的底边框，可能被下一行的顶边框覆盖，也可能被忽略，具体取决于哪一侧先渲染、是否有!important干预。这种时候别硬调，换思路：用伪元素或额外div模拟分隔线更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
