表格边框不显示或断开，主因是border-collapse默认为separate导致相邻边框重叠；应设collapse实现连续边框，或用separate+table单设外框并清除th/td边框。
表格边框不显示或只显示部分？检查 border-collapse 是否为 separate
默认情况下，table 的 border-collapse 值是 separate，此时单元格各自有独立边框，但相邻边框会重叠（实际只显示较宽/较深的那个），容易误以为“没边框”或“边框断开”。要让所有边框清晰连续，必须设为 collapse：
-
border-collapse: collapse：合并相邻边框，border作用于table、th、td都能生效，且无间隙 -
border-collapse: separate：边框独立，需用border-spacing控制单元格间距（默认 2px），此时仅给table设border通常看不到内部线
给整个表格加外边框，但不想影响内部线条？用 table 单独设 border + border-collapse: separate
这种需求常见于设计稿中“仅外框粗线，内部无线”的表格。关键在于隔离作用对象：
- 只给
table元素设置border: 2px solid #333 - 确保
border-collapse: separate（默认值，可不写） - 显式清除
th和td的边框：th, td { border: none; } - 如需微调外框与内容距离，用
padding而非border-spacing（后者只影响单元格间距，不影响外框内边距）
border 写在 th/td 上却无效？优先级和继承问题要留意
表格元素的边框渲染受多重规则影响，常见失效原因：
-
border-collapse: collapse下，相邻单元格边框会“竞争”，宽度/样式/颜色不一致时，浏览器按特定规则取舍（例如取较宽者），不是“叠加” - 父级
table设了border，但未设border-collapse: collapse，子元素的border可能被视觉遮盖 - CSS 选择器权重不足：比如用了类名
.cell设border，但浏览器默认样式或更高权重要素（如内联style）覆盖了它 - 某些 UI 框架（如 Bootstrap）重置了表格样式，需检查是否被
border: 0或border-collapse: collapse配合其他规则干扰
细线表格（1px）在高清屏上发虚？用 border + transform: scaleY(0.5) 不可靠
直接缩放边框会导致渲染模糊、对齐偏移，尤其在滚动或动画时更明显。真正稳定的方案是：
立即学习“前端免费学习笔记（深入）”；
- 保持
border: 1px solid #ccc不变，改用background-image模拟细线（如线性渐变），规避设备像素比问题 - 或使用
box-shadow模拟单侧边框（box-shadow: 1px 0 0 #ccc），它不受缩放影响 - 若必须用
transform，应作用于整个table容器，并配合will-change: transform提升渲染层，但仅限极端兼容场景
最省心的做法其实是接受系统级渲染差异——现代浏览器对 1px 边框已有较好适配，强行 hack 反而增加维护成本。
