绝大多数时候该用 nth-child(odd)，因其按dom顺序计数；仅当表格含等非子元素时才需nth-of-type(odd)；边框合并必须用border-collapse: collapse；响应式下需box-sizing: border-box+微调边框位置防滚动条；chrome中的currentcolor存在解析bug。
隔行换色用 nth-child(odd) 还是 nth-of-type(odd)？
绝大多数时候该用 nth-child(odd)，除非表格里混了 <caption></caption>、<colgroup></colgroup> 或其他非 <tr> 的子元素。因为 <code>nth-of-type 只统计同类型标签（比如只数 <tr>），而 <code>nth-child 按 DOM 顺序数所有子节点——表格结构简单时二者表现一样，但一旦加了辅助语义标签，nth-of-type 才能稳定命中目标行。
常见错误现象：nth-of-type(odd) 在有 <thead> 的表里失效，因为 <code><thead> 和 <code><tbody> 是包裹容器，真正子元素是它们，不是 <code><tr>；此时得写成 <code>tbody tr:nth-child(odd)。
- 实操建议：直接对
<tbody> 下的 <code><tr> 应用 <code>nth-child(odd)，避免依赖父级结构是否“干净” - 兼容性：IE9+ 支持
nth-child，IE8 及以下需 JS 回退或放弃隔行色 - 性能影响极小，现代浏览器对这类伪类优化得很好，不用预生成 class
- 注意：设了
collapse后，padding依然生效，但margin对<td> 无效——别试图用 margin 拉开单元格 <li> <code>border-spacing只在border-collapse: separate（默认值）下起作用，和collapse互斥 - 如果用了 CSS-in-JS 或 Shadow DOM，确认该样式作用域覆盖到
<table> 标签本身，否则 <code>collapse不生效响应式断点下，如何避免横向滚动条被边框撑出？
根本原因是
border计入盒模型总宽，而移动端常用width: 100%+overflow-x: auto包裹表格，此时左右边框会让内容实际宽度 > 100%，触发滚动条。解决方式不是删边框，而是用
box-sizing: border-box配合内边距微调：- 给
<table> 加 <code>box-sizing: border-box（虽然 table 默认不继承，但显式声明有效） - 把外层容器设为
overflow-x: auto，并加padding-bottom: 1px（防 iOS Safari 滚动条遮挡底边） - 关键一步：移除
<th>/<code><td> 的左右 <code>border，改用border-left仅在第一列保留，border-right仅在最后一列保留，中间列靠border-left统一控制这样既保持视觉连贯性，又确保总宽度严格可控。
Chrome 中
border-color: currentColor在表头失效？是的，Chrome（v115+）对
<th> 的 <code>currentColor解析存在 bug：当<th> 未显式设置 <code>color，且父级<thead> 或 <code><table> 也无 color 声明时，<code>border-color: currentColor会退为黑色，而非继承 body 的文字色。这不是规范问题，是渲染引擎处理表格匿名对象时的偏差。解决方案很直接：
- 给
<thead> 显式加 <code>color: inherit - 或者更稳妥：用具体颜色值（如
#333）替代currentColor，尤其当对比表需要打印或暗色模式适配时，可控性更强 - 若坚持用
currentColor，务必测试<th> 的 computed color 是否真等于预期——别信初始值 <p>这种细节在跨团队协作时最容易被忽略，等 QA 提 bug 才发现边框色在 Chrome 和 Firefox 里不一致。</p> </th>
- 给
- 给
边框合并用 border-collapse: collapse 还是 border-spacing: 0？
必须用 border-collapse: collapse。这是表格专属属性，它让相邻单元格边框合为一条线，否则哪怕 border-spacing 设为 0，<td> 和 <code><th> 的边框仍会双倍叠加、错位、出现 1px 缝隙。
<p>使用场景：产品对比表常需清晰的内外边框分隔，尤其当某列要高亮（比如“推荐方案”列加粗边框），<code>collapse 是唯一能保证边框对齐的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
