How to fill the entire cell with a background color in ONE table cell inside of a class

Question

I have a table row inside a table, and inside that table row, I have four <td> objects:

<table id="top">
<tr>
    <td class="topitem" style="float:left; margin-left:10px;" id="topone">Home</td>
    <td class="topitem" id="toptwo">Go To Channel</td>
    <td class="topitem" id="topthree">Other things I like to do</td>
    <td class="topitem" id="about" id="topfour">About</td>
</tr>
</table>

In my css, I'm trying to pick out the first one of the four, like this: #top { height:65px; background-color:black; margin-top:20px; } #top tr:first-child td:nth-child(1) { background-color:#00F; }

I have found similar answers:

However, none of them work, and I could even put more answers there that doesn't work, but I think that's enough. I need a 2016 update.

What I'm actually trying to do is make one of those "top menu" things where when you rollover, the background of the cell will turn white, and the text will turn black. The problem is that the height is 65px and I can't get the whole thing to turn white, only the highlighted text.

But, for now, I'm not going to worry about that. I just need to know how to fit the background color to the entire table cell.

Your code appears to work fine ([**test**](https://jsfiddle.net/qme03L4n/)). Have you tried using just `#topone`? — Michael Benjamin, Dec 13 '16 at 22:05
Seems its working fine. Here's the (https://jsfiddle.net/varad92/r94sk2xv/). — Varad Chemburkar, Dec 13 '16 at 22:10
No, my table is 65 pixels in height (I forgot to mention). I need to fill in the entire section, not just highlight the text. — MattGotJava, Dec 14 '16 at 01:30

zer00ne · Answer 1 · 2016-12-13T23:19:22.443

Added the following rulsets for CSS:

td {
  background: #ede;
  color: #112;
  transition: background 0.4s ease-out, color 0.4s ease-out;
  cursor: pointer;
}
td:first-of-type:hover {
  background: #112;
  color: #ede;
  transition: background 0.4s ease-in, color 0.4s ease-in;
}

td {
  background: #ede;
  color: #112;
  transition: background 0.4s ease-out, color 0.4s ease-out;
  cursor: pointer;
}
td:first-of-type:hover {
  background: #112;
  color: #ede;
  transition: background 0.4s ease-in, color 0.4s ease-in;
}

<table id="top">
  <tr>
    <td class="topitem" style="float:left; margin-left:10px;" id="topone">Home</td>
    <td class="topitem" id="toptwo">Go To Channel</td>
    <td class="topitem" id="topthree">Other things I like to do</td>
    <td class="topitem" id="topfour">About</td>
  </tr>
  <tr>
    <td class="miditem" style="float:left; margin-left:10px;" id="midone">Row2</td>
    <td class="miditem" id="midtwo">Go To Channel</td>
    <td class="miditem" id="midthree">Other things I like to do</td>
    <td class="miditem" id="midfour">About</td>
  </tr>
  <tr>
    <td class="lastitem" style="float:left; margin-left:10px;" id="lastone">Row 3</td>
    <td class="lastitem" id="lasttwo">Go To Channel</td>
    <td class="lastitem" id="lastthree">Other things I like to do</td>
    <td class="lastitem" id="lastfour">About</td>
  </tr>
</table>

How to fill the entire cell with a background color in ONE table cell inside of a class

1 Answers1