tbody tr:nth-child(even)必须加tbody前缀，否则浏览器将thead的tr计入序号导致隔行变色错位；border-collapse: collapse是实现连续背景色的前提；rowspan单元格背景断裂需用伪元素或清除父级背景解决。
tbody tr:nth-child(even) 为什么必须加 tbody 前缀
不加 tbody 就写 tr:nth-child(even)，样式大概率错位——浏览器从整个 <table> 开始数子节点，<code><thead> 里的 <code><tr> 也被计入序号。比如表头占 1 行，第一行数据实际是第 2 个 <code><tr>，匹配 <code>nth-child(2)（即 even），第二行数据就变成第 3 个 <tr>，匹配 <code>odd，结果整行颜色全偏移。
正确写法是限定作用域：tbody tr:nth-child(even) 和 tbody tr:nth-child(odd)。即使 HTML 没显式写 <tbody>，浏览器也会自动补上，但选择器里不能省略。
<ul><li>用开发者工具选中某行 → 右键「Reveal in Elements Panel」→ 看它在 <code><tbody> 下的真实子节点序号（不是“第几行”，是 DOM 树里的位置）
<li>临时删掉 <code><thead> 测试：如果这时颜色正常了，基本就是表头干扰
<li>千万别写 <code>table tr:nth-child(even)——它会把 <thead> 和 <code><tfoot> 一并染色
<h3>border-collapse: collapse 是隔行变色的隐形前提</h3>
<p>默认表格边框是分离的（<code>border-collapse: separate），单元格之间有空白缝隙，<tr> 的背景色会被这些间隙“割裂”，视觉上变成断续条纹，根本不像“隔行”。
<p>必须在 <code><table> 上设置 <code>style="border-collapse: collapse;" 或 CSS 中声明 table { border-collapse: collapse; }，才能让背景色连成完整一行。
-
border-collapse: collapse还能消除默认的cellspacing间距，让表格更紧凑 - 同时建议给
<td> 和 <code><th> 加 <code>padding，否则文字紧贴边框，高亮效果廉价 - 如果用了
border属性，记得统一设在td/th上，避免和tr背景冲突 - 最直接解法：清除干扰背景，比如
tr:nth-child(2) { background-color: transparent; }（假设跨行从第 2 行开始） - 更稳妥方案：用伪元素补全背景，给
<td rowspan="2"> 加 class 如 <code>class="span-bg"，再写：.span-bg::after {<br> content: "";<br> position: absolute;<br> top: 0;<br> left: 0;<br> width: 100%;<br> height: 200%;<br> background-color: #ffeb3b;<br> z-index: -1;<br>} - 注意：
height: 200%是关键——跨 3 行就写300%；父<td> 必须保持 <code>overflow: visible（默认就是）IE8 兼容时别硬扛 nth-child
IE8 只支持
:first-child，不支持nth-child。如果必须兼容，退回到 JS 或服务端生成 class 是唯一可靠路径。JS 示例（简单有效）：
function setRowBg() {<br> const rows = document.querySelectorAll("tbody tr");<br> rows.forEach((row, i) => {<br> row.className = i % 2 === 0 ? "row-even" : "row-odd";<br> });<br>}<br>document.addEventListener("DOMContentLoaded", setRowBg);- 对应 CSS 写
.row-even { background-color: #f5f5f5; }和.row-odd { background-color: #ffffff; } - 避免用
getElementsByTagName+for循环手动改style.backgroundColor，容易被后续 CSS 覆盖 - 如果表格动态增删行，记得在插入后重新调用该函数，或用事件委托监听
真正麻烦的不是写几行 CSS，而是 DOM 结构、层叠顺序、渲染细节三者咬合出错——
tbody前缀漏写、border-collapse忘设、rowspan配合伪元素时height百分比算错，任何一个都足以让颜色断在不该断的地方。 - 对应 CSS 写
rowspan 单元格背景断裂怎么修
给 <td rowspan="2"> 加 <code>style="background-color: #ffeb3b;"，第二行位置仍是白底？这不是 rowspan 不支持背景，而是 <tr> 的背景盖住了跨行单元格的下半部分。
<p>常见原因：所在 <code><tr> 或 <code><tbody> 有自身背景（哪怕透明），或启用了 <code>border-collapse: collapse 后渲染层叠顺序出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
