如何为thead整行设置背景色并去除边框？

你的代码里有几个关键问题导致效果不符合预期：

• 用了过时的HTML属性bgcolor，不如CSS控制灵活规范
• background-clip: content-box会限制背景仅填充单元格内容区，无法铺满整行
• 表格默认的border-collapse: separate模式会让单元格之间产生缝隙

直接按下面的代码修改就能解决问题：

修改后的HTML #

<thead>
  <tr class="ha">
    <th>Evento</th>
    <th>Valor</th>
  </tr>
</thead>

修改后的CSS #

/* 核心：合并表格边框，消除单元格之间的缝隙 */
table {
  border-collapse: collapse;
}

/* 给thead的目标行设置背景色 */
table thead tr.ha {
  background-color: #d6f5d6;
}

/* 移除th的多余边框 */
table thead tr th {
  border: none;
}

如果你的表格需要保留整体边框，不想完全去掉th的边框，可以把border: none改成border-color: #d6f5d6，让边框颜色和背景色一致，视觉上就不会出现突兀的边框了。

另外记得删掉原CSS里的background-clip: content-box，默认的border-box模式才会让背景铺满整个单元格区域。

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