如何为单元格数量不一的HTML动态表格整行设置条纹背景色？

你的问题根源很明确：你把条纹背景色应用在了<td>单元格上，而不是<tr>行元素上。所以当一行的单元格数量少于表头时，空白区域就没有背景色，看起来断了。

给你两个关键修改点，就能完美解决：

1. 调整CSS规则，把背景色给<tr>而不是<td> #

原来的奇偶行背景是给每个td加颜色，现在直接给整行设置：

/* 先给表格加上边框合并和宽度，确保行能铺满容器 */
.table-striped {
  border-collapse: collapse;
  width: 100%;
}

.table-striped th { 
  height: 45px; 
  background-color: #bfff00 !important; 
  color: #191919; 
}
.table-striped td { 
  padding: 8px; 
  border: 2px solid #F6F6F6; 
  font-weight: bold; 
}

/* 直接给奇偶行设置背景色 */
.table-striped>tr:nth-child(odd) {
  background-color: #bababa;
}
.table-striped>tr:nth-child(even) {
  background-color: #e8e7e6;
}

2. 为什么这样改？ #

• border-collapse: collapse：消除单元格之间的默认空隙，让行的背景色能完全覆盖整个行宽，不会出现单元格之间的白色缝隙
• 把背景从<td>移到<tr>：不管一行有3个、5个还是8个单元格，整行的背景色都会统一填充，空白区域也会被行背景覆盖
• 用odd/even比n+1/n+2更直观，是条纹表格的标准写法

修改后的完整示例 #

HTML结构不需要改动，只替换CSS就好：

<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>

这样不管你的动态表格生成多少个单元格，每行的背景色都会完整覆盖整行，再也不会出现空白区域啦！

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