[CSS] 簡單讓Table的底色奇數偶數相間

常常我們在寫code的時候，會需要將table奇偶數運用不同顏色作區隔。

這時候我們難道要用class一個一個去分??

運用CSS就可以簡單解決這個問題~

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

只要在CSS部分加入這個~表格就會呈現以下的效果喔~

我是第一行	我是第一行
我是第二行	我是第二行
我是第三行	我是第三行
我是第四行	我是第四行
我是第五行	我是第五行

範例code

HTML部分：

<table class="myTable">
<tbody>
<tr><td>我是第一行</td><td>我是第一行</td></tr>
<tr><td>我是第二行</td><td>我是第二行</td></tr>
<tr><td>我是第三行</td><td>我是第三行</td></tr>
<tr><td>我是第四行</td><td>我是第四行</td></tr>
<tr><td>我是第五行</td><td>我是第五行</td></tr>
</tbody></table>

CSS部分：

<style>
   .myTable {border: 1px solid black;}
   .myTable tr:nth-child(even) {background: #CCC}
   .myTable tr:nth-child(odd) {background: #FFF}
</style>

其他的部分，CSS也可以做簡單的規則修改，例如某標籤以X倍相間。

/*針對表格的欄*/

col:first-child {background: #CCC}
col:nth-child(4n+5) {background: #AAA}

/*針對項目標籤*/
li:nth-child(5n+4) {color: red}