更改HTML和CSS表格中行的顏色

Question

嘗試學習HTML和CSS，我有一個簡單的問題。

我怎樣才能給每一行表中的不同顏色？例如第1行是紅色的，第2行是藍色等

這是我的HTML代碼：

#table { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 600px; 
 
    border-collapse; 
 
    collapse; 
 
} 
 
#table td, 
 
#table th { 
 
    font-size: 12x; 
 
    border: 1px solid #4D365B; 
 
    padding: 3px 7px 2px 7px; 
 
} 
 
#table th { 
 
    font-size: 14px; 
 
    text-align: left; 
 
    padding-top: px; 
 
    padding-bottom: 4px; 
 
    background-color: #4D365B; 
 
    color: #918CB5; 
 
} 
 
#table td { 
 
    color: #000000; 
 
    background-color: #979BCA; 
 
}

<table id="table"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact 
 
     <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
</table>

Answer 1

這可以很容易地使用pseudo selectorsnth-child來完成。

#table tr:nth-child(odd){background:red} 
 
#table tr:nth-child(even){background:blue}

<table id="table"> 
 
<tr><th> Company</th><th>Contact<th>Country</th></tr> 
 
<tr><td> 1</td><td>2<td> 3</td></tr> 
 
<tr><td> 1</td><td>2<td> 3</td></tr> 
 
<tr><td> 1</td><td>2<td> 3</td></tr> 
 
</table>

Answer 2

如果我正確理解你的問題，你想給每一行不同的顏色？你有幾個選項...

• 添加一個類到每一行和風格的那些。
• 使用直接兄弟選擇tr + tr
• 使用:nth-of-type

table tr {background: red;} 
 
table tr:nth-of-type(2) {background: blue;} 
 
table tr:nth-of-type(3) {background: green;} 
 
table tr:nth-of-type(4) {background: yellow;} 
 
table tr:nth-of-type(5) {background: grey;}

<table id="table"> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact 
 
     <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2 
 
     <td>3</td> 
 
    </tr> 
 
</table>

Answer 3

tr:nth-child(even) { 
 
    background: #ff0101; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background: #0030ff; 
 
}

<table class="ex1"> 
 
    <tbody> 
 
    <tr> 
 
     <th>Month 
 

 
     </th> 
 
     <th>'94 
 

 
     </th> 
 
     <th>'95 
 

 
     </th> 
 
     <th>'96 
 

 
     </th> 
 
     <th>'97 
 

 
     </th> 
 
     <th>'98 
 

 
     </th> 
 
     <th>'99 
 

 
     </th> 
 
     <th>'00 
 

 
     </th> 
 
     <th>'01 
 

 
     </th> 
 
     <th>'02 
 

 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <td>Jan 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>11 
 

 
     </td> 
 
     <td>11 
 

 
     </td> 
 
     <td>11 
 

 
     </td> 
 
     <td>11 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Feb 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>12 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>12 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Mar 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Apr 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>May 
 

 
     </td> 
 
     <td>21 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>21 
 

 
     </td> 
 
     <td>22 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>21 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>19 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jun 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
     <td>23 
 

 
     </td> 
 
     <td>25 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
     <td>25 
 

 
     </td> 
 
     <td>23 
 

 
     </td> 
 
     <td>25 
 

 
     </td> 
 
     <td>23 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jul 
 

 
     </td> 
 
     <td>29 
 

 
     </td> 
 
     <td>28 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
     <td>27 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
     <td>25 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
     <td>25 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Aug 
 

 
     </td> 
 
     <td>29 
 

 
     </td> 
 
     <td>28 
 

 
     </td> 
 
     <td>27 
 

 
     </td> 
 
     <td>28 
 

 
     </td> 
 
     <td>28 
 

 
     </td> 
 
     <td>27 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
     <td>28 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sep 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
     <td>23 
 

 
     </td> 
 
     <td>23 
 

 
     </td> 
 
     <td>26 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
     <td>24 
 

 
     </td> 
 
     <td>22 
 

 
     </td> 
 
     <td>21 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Oct 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>22 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>22 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>19 
 

 
     </td> 
 
     <td>20 
 

 
     </td> 
 
     <td>22 
 

 
     </td> 
 
     <td> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Nov 
 

 
     </td> 
 
     <td>18 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
     <td>17 
 

 
     </td> 
 
     <td>16 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td> 
 

 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Dec 
 

 
     </td> 
 
     <td>15 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>14 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>10 
 

 
     </td> 
 
     <td>13 
 

 
     </td> 
 
     <td>11 
 

 
     </td> 
 
     <td> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

你可以嘗試SE通過CSS引導每一行。你的情況：

table tr:first-child{background:red} or table tr:nth-child(1){background:red} 

table tr:nth-child(2){background:blue} 

table tr:nth-child(3){background:orange} 

table tr:nth-child(4){background:yellow} 

table tr:last-child{background:purple} or table tr:nth-child(5) 
{background:purple} 

Answer 5

您也可以嘗試這樣

#table tr{background: red;} 
 
#table tr:nth-child(2n+1){background: blue;} 
 

 
#table { 
 
font-family: Arial, Helvetica, sans-serif; 
 
width:600px; 
 
border-collapse;collapse; 
 

 
#table td, #table th { 
 
font-size:12x; 
 
border:1px solid #4D365B; 
 
padding: 3px 7px 2px 7px; 
 

 
#table th { 
 
font-size:14px; 
 
text-align:left; 
 
padding-top:px; 
 
padding-bottom:4px; 
 
background-color:#4D365B; 
 
color:#918CB5; 
 

 
#table td { 
 
color:#000000; 
 
background-color:#979BCA; 
 
}

<table id="table"> 
 
<tr><th> Company</th><th>Contact<th>Country</th></tr> 
 
<tr><td> 1</td><td>2<td> 3</td></tr> 
 
<tr><td> 1</td><td>2<td> 3</td></tr> 
 
<tr><td> 1</td><td>2<td> 3</td></tr>

Answer 6

下面的小塊代碼應該改變顏色錶行。

table, td, th { 
    border: 1px solid red; 
} 

th { 
    background-color: red; 
    color: black; 
} 

來源：http://www.snoopcode.com/css/css-tables