如何使表格第一行的背景颜色与表格不同？答案

【问题标题】：How to make the background of the first row of the table different color from the table?如何使表格第一行的背景颜色与表格不同？
【发布时间】：2017-10-05 14:20:31
【问题描述】：

我有一张桌子，我想让第一行的背景颜色不同，例如蓝色。我使用 table tr:first-child 但它不起作用。你能帮助我吗？谢谢。

<table>
    <tr><td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr><td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    <tr><td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
</table>

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用tr:first-of-type。检查下面更新的 sn-p。

table tr:first-of-type td {
    background: blue;
}

<table>
    <tr><td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr><td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    <tr><td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
</table>

【讨论】：

【解决方案2】：

你可以用这个：

table tr:first-child {
    background: blue;
}

或者您可以将课程添加到您的第一个 tr

.bg-blue {
   background:blue;
 }

<table>
  <tr class="bg-blue">
      <td>1</td>
      <td>2</td>
      <td>3</td>
  </tr>
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
  </tr>
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

你可以使用这个sn-p。

table tr:first-child td {
  background: blue;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

希望这会有所帮助:)

【讨论】：

【解决方案4】：

正如您所说的 first-child 不起作用，我建议您检查它的父属性是否有任何属性覆盖您的 first-child 属性。基本上，它应该以这种方式工作。另外，我想知道您实际遇到的问题是哪个浏览器。试试这个：

table tr:first-child {
    background:blue;
   color:white;
   
}

<table>
    <tr><td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr><td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    <tr><td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
</table>

如果解决方案仍然无法解决您的问题，您可以添加评论。

【讨论】：