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

时间:2017-10-05 05:56:38

标签: html css

我有一张桌子,我想让第一行有不同的背景颜色,例如蓝色。我使用表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>

4 个答案:

答案 0 :(得分:0)

您可以使用此代码段。

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>

希望这会有所帮助:)

答案 1 :(得分:0)

您可以使用tr:first-of-type。检查下面的更新代码段。

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 :(得分:0)

你可以用这个:

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 :(得分:0)

正如您所说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>
如果仍未使用解决方案解决问题,则可以在问题中添加评论。