如何在类内的一个表格单元格中用背景色填充整个单元格答案

【问题标题】：How to fill the entire cell with a background color in ONE table cell inside of a class如何在类内的一个表格单元格中用背景色填充整个单元格
【发布时间】：2016-12-15 00:54:01
【问题描述】：

我在一个表格内有一个表格行，在该表格行内，我有四个 <td> 对象：

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

在我的 css 中，我试图挑选出四个中的第一个，如下所示：＃最佳 { 高度：65px；背景颜色：黑色；边距顶部：20px； } #top tr:first-child td:nth-child(1) { 背景颜色：#00F; }

我找到了类似的答案：

但是，它们都不起作用，我什至可以在那里放更多不起作用的答案，但我认为这就足够了。我需要 2016 年的更新。

我实际上想做的是制作“顶级菜单”之一，当您翻转时，单元格的背景将变为白色，而文本将变为黑色。问题是 height 是 65px，我不能让整个东西变成白色，只有突出显示的文本。

但是，现在，我不会担心这个。我只需要知道如何使背景颜色适合整个表格单元格。

【问题讨论】：

您的代码似乎运行良好 (test)。你试过只使用#topone吗？
好像work fine?
似乎工作正常。这是 (jsfiddle.net/varad92/r94sk2xv)。
不，我的表格高度为 65 像素（我忘了提及）。我需要填写整个部分，而不仅仅是突出显示文本。

标签： html css html-table background-color

【解决方案1】：

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

【讨论】：