Privacy Terms

Who We Are At Walk In The Cloud, we are committed to maintaining the trust and confidence of all visitors to our web site. In particular, we want you to know that Walk In The Cloud is not in the business of selling, renting or trading email lists with other companies and businesses for marketing purposes.  In this Privacy Policy, we’ve provided detailed information on when and why we collect personal information, how we use it, the limited conditions under which we may disclose it to others, and how we keep it secure.  We take your privacy seriously and take measures to provide all visitors and users of Walk In The Cloud with a safe and secure environment. Cookies  Walk In The Cloud may set and access Walk In The Cloud cookies on your computer.  Cookies are used to provide our system with the basic information to provide the services you are requesting.  Cookies can be cleared at any time from your internet browser settings.  Google Analytics When someone visits Walk In The Cloud we us

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

留言