表格行背景颜色未填充整行

Question

我有一个简单的表，该表的顶部一行有一个td元素，下面的表有3个td，这里是结构：

<tr class="type">
  <td>
    <span>Platform</span>
  </td>
</tr>
<tr class="type__el">
  <td>OS</td>
  <td class="value">WINDOWS</td>
  <td class="score"> 8.6</td>
</tr>

因此，我试图设置第一行的背景颜色，但无法正常工作，只能突出显示文本：

.type {
 background-color : #ccc;
}

我尝试将3个td添加到该行中，并且可以正常工作，但由于我发现它们之间存在以下间隙，因此它不是干净的：

Answer 1

您可以使用属性<td>在第一行中花费colspan="3"

结果

.type {
  background-color: #ccc;
}

<table>
  <tr class="type" bgcolor="red">
    <td colspan="3">
      <span>Platform</span>
    </td>
  </tr>
  <tr class="type__el">
    <td>OS</td>
    <td class="value">WINDOWS</td>
    <td class="score"> 8.6</td>
  </tr>
</table>

Answer 2

您必须使用colspan属性，值3应该有效

.type {
 background-color : #ccc;
}

<table>
  <tbody>
    <tr class="type" bgcolor="red">
      <td colspan="3">
        <span>Platform</span>
      </td>
    </tr>
    <tr class="type__el">
      <td>OS</td>
      <td class="value">WINDOWS</td>
      <td class="score"> 8.6</td>
    </tr>
  </tbody>
</table>

您可以在this question

上了解更多信息