Question

我用了一张桌子。我应用了CSS ID table-4。

关注html代码：

<table border='0' width='100%' id='table-4'>
   <tr><td>Date</td><td>Headline</td></tr>
   <tr><td>29 DEC</td><td>Dead</td></tr>
   <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
</table>

这是style.css：

#table-4 { background-color: #F2F2F2;}

因此整个表格的背景颜色为#F2F2F2，但我希望Date和Headline的第一行有不同的颜色，所以如何修改我的CSS呢？？

Answer 1

您可以使用：first-child 。写得像这样：

#table-4 tr:first-child{
    background:red;
}

选中此http://jsfiddle.net/cbK8J/

Answer 2

@JonathandeM.'s comment是正确的。在其中弹出<thead>和<tbody>标记，并将<td>行中的<thead>标记更改为<th>标记（因为HTML说的是什么，以及它们是什么'标题'：

<table border='0' width='100%' id='table-4'>
   <thead>
      <tr><th scope="col">Date</th><th scope="col">Headline</th></tr>
   </thead>
   <tbody>
      <tr><td>29 DEC</td><td>Dead</td></tr>
      <tr><td>30 DEC</td><td>Hit</td></tr>
      <tr><td>02 JAN</td><td>Leg</td></tr>
   </tbody>
</table>

然后用于使标题行具有不同背景颜色的CSS是：

#table-4 thead tr {
   background-color: green;
}

Answer 3

你可以这样做：

HTML：

<td class="whatever">Date</td><td class="whatever">Headline</td>

的CSS：

.whatever { color: #a9a9a9 }

<tr>将执行该行，<td>将执行该行。

Answer 4

您必须将id添加到第一个tr标记：

   <table border='0' width='100%' id='table-4'>
   <tr id ="r1" ><td>Date</td><td>Headline</td></tr>
   <tr><td>29 DEC</td><td>Dead</td></tr>
   <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
   </table>

然后添加另一个css行：

#table-4 #r1 { background-color: blue;}

它会给你蓝色

Answer 5

或者您可以仅修改HTML文件，而无需更改

    <table border='0' width='100%' id='table-4'>
    <tr><td bgcolor='red' >Date</td><td  bgcolor='red'>Headline</td></tr>
    <tr><td>29 DEC</td><td>Dead</td></tr>
    <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
   </table>

我想只为html表的第一行使用不同的颜色

5 个答案: