必须设为collapse，否则tr的border-bottom无效；需在table上设置border-collapse: collapse，且仅在collapse模式下tr边框才生效，separate模式下只能通过td/th单独设置。
table 的 border-collapse 必须设为 collapse
默认情况下 table 的边框是分离的（border-collapse: separate），这时给 tr 或 td 单独设边框，上下行之间会出现双线重叠，根本没法控制“行边框”的颜色。只有设成 collapse，所有单元格边框才真正合并成一条线，才能让 tr 的 border-bottom 生效。
常见错误：只给 tr 加 border-bottom 却忘了改 border-collapse，结果什么也看不到。
- 必须在
table上设置style="border-collapse: collapse;"或通过 CSS 类统一控制 -
tr本身不渲染边框，但它的border-bottom会作用于其内部所有td/th的底边——前提是collapse模式 - 如果用了
separate模式，只能靠td自己设border-bottom，但这样每列都会多出一条线，不是“整行边框”
用 tr:nth-child() 给奇偶行设不同 bottom-border 颜色
想实现“第1行底边红、第2行底边蓝、第3行底边红……”，最直接的方式就是用 CSS 选择器定位 tr，然后单独设 border-bottom。注意：这里设的是“行的底边”，不是“单元格的底边”，所以样式写在 tr 上更干净。
示例代码：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
}
tr:nth-child(odd) {
border-bottom: 2px solid #e74c3c;
}
tr:nth-child(even) {
border-bottom: 2px solid #3498db;
}
-
tr:nth-child(odd)匹配第1、3、5…行；even匹配第2、4、6…行 - 不要用
tr:nth-of-type()—— 它在有thead/tbody时行为不稳定 - 如果表格有
thead，它也会被nth-child计入，可能打乱预期顺序；建议把样式限定在tbody tr
最后一行不显示 bottom-border 的处理方式
通常你不想让表格最后一行底下还有一条线。直接给 tr:last-child 设 border-bottom: none 是最稳妥的做法，但它必须写在前面两条规则之后（CSS 层叠顺序），否则会被覆盖。
- 正确顺序：
tr:nth-child(odd)→tr:nth-child(even)→tr:last-child - 或者更安全地写成：
tbody tr:last-child { border-bottom: none; }，避免影响thead行 - 别试图用
:not(:last-child)套在前面规则里——可读性差，且容易漏掉边界情况
兼容性与替代方案：IE10+ 才支持 tr 上设 border
IE9 及更早版本不支持给 tr 元素设置 border（哪怕 border-collapse: collapse 已启用）。如果项目还需兼容 IE9，只能退回到给 td 和 th 单独设 border-bottom，并用 nth-child 控制列内单元格。
- IE9 下可行写法：
td:nth-child(n), th:nth-child(n) { border-bottom: 2px solid #e74c3c; }，再配合:nth-child(even)覆盖 - 但这样每列都有一条线，视觉上仍是“整行效果”，只是底层实现不同
- 现代项目基本不用管 IE9，但团队若还在维护老系统，这点得提前确认
真正麻烦的不是怎么写，而是忘记 border-collapse: collapse 这一行——几乎所有“边框不生效”的问题都卡在这儿。
