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


Keywords:html 


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.


1 Answer: 

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>