CODEWITHSUNDEEP
htmlcss
user121548789
user121548789

Reputation: 189

Table row background color not filling the whole row

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 :

enter image description here

.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 : enter image description here

Upvotes: 1

Views: 1320

Answers (2)

hisbvdis
hisbvdis

Reputation: 1380

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>

Upvotes: 2

GammaGames
GammaGames

Reputation: 1819

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

Upvotes: 1

Related Questions