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