Table row background color not filling the whole row

Question

I have a simple table that has a row at the top with one td element and the ones under it have 3 tds here is the structure :

<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>

So im trying to set the background color for the first row but it doesn't work properly it only highlights the text :

.type {
 background-color : #ccc;
}

i've tried adding 3 tds to the row and it works but not clean since i see these gaps between them :

score 2 · Accepted Answer · answered Aug 26 '19 at 17:54

You can expend <td> in first row by using property colspan="3"

Result

.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>

score 1 · Answer 2 · answered Aug 26 '19 at 17:54

You have to use the colspan attribute, a value of 3 should work

.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>

You can read more about it on this question

Table row background color not filling the whole row

2 Answers2