如何解决表格tbody元素背景色仅单元格生效、底色透显问题？

嘿，这个问题我之前也踩过坑！其实核心原因是表格默认的border-collapse: collapse属性在搞鬼——当边框合并时，tbody的背景会被它内部单元格（<td>/<th>）的默认白色背景覆盖，而且单元格之间的缝隙还会透出表格本身的背景，看起来就像是只有单元格被着色了。

给你两个靠谱的解决方案：

方案一：给tbody内的所有行设置背景色 #

直接把tbody的背景色传递给它下面的每一行，这样整个tbody区域就会被完全填充：

/* 给偶数tbody的所有行设置背景色 */
table tbody:nth-child(even) tr {
  background-color: #f5f5f5;
}

这种方法兼容性最好，不需要修改表格的默认布局属性，适合大多数场景。

方案二：调整表格的边框合并属性 #

把表格的border-collapse改成separate，同时设置border-spacing: 0来保持表格紧凑，这样tbody的背景就能正常显示，不会被单元格遮挡：

table {
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格间隙，保持表格紧凑 */
}

table tbody:nth-child(even) {
  background-color: #f5f5f5;
}

如果你的单元格本身设置了自定义背景色，记得把它们的背景色设为transparent，避免覆盖tbody的背景：

table tbody:nth-child(even) td {
  background-color: transparent;
}

这两种方法都能让你的tbody呈现出均匀的背景色，轻松区分不同模块~

内容的提问来源于stack exchange，提问作者Joachim