4

I used a table. I applied CSS ID table-4.

Following the html code:

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

Here is the style.css:

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

So the whole table's background color is #F2F2F2, but I want a different color for the first row where Date and Headline goes, so how could I modify my CSS for this thing?

4

5 に答える 5

8

You can use :first-child for this. Write like this:

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

Check this http://jsfiddle.net/cbK8J/

于 2013-01-04T09:30:38.610 に答える
4

@JonathandeM。のコメントは正しいです。そこにポップ<thead>してタグを付け、行<tbody>のタグをタグに変更します（HTMLは何であるかを示し、それらは見出しであるため）：<td><thead><th>

<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;
}
于 2013-01-04T09:28:20.313 に答える
1

you can do this:

HTML:

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

css:

.whatever { color: #a9a9a9 }

<tr> will do the row, <td> will do the cells.

于 2013-01-04T09:40:32.747 に答える
0

最初のtrタグにidを追加する必要があります。

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

それはあなたに青い色を与えるでしょう

于 2013-01-04T09:29:46.813 に答える
0

Or you can simply modify only the Html file, no change in css 

    <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>
于 2018-11-15T10:12:25.717 に答える