常常我們在寫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}
留言
張貼留言