跳到主要內容

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

留言

這個網誌中的熱門文章

[新竹] 系統傢俱各家比較與心得(三商美福、安德康、木可、歐德、綠的)

最近花蠻多時間在比較系統傢俱,與趕著預售屋客變有關,不過也因此了解不少。以往都覺得系統傢俱較死板、無造型、設計。但這次的經驗,讓我對系統傢俱有較不一樣的感覺。

其實,系統傢俱是個蠻能「客製化」的設計,只要自己有做足功課,我認為每家系統傢俱都可以達到客戶喜好的風格、效果,而它們相較於木工親民的價格真的會讓人感動落淚。

我自己的感覺是,大家(如:綠的、三商美福)的系統傢俱在聘請設計師上,較有經驗也較有獨特見解,而且空間規劃較熟練,比較抓得到客戶的喜好與需求,當然價格較高。

小家(如:木可、安德康等)的系統傢俱最大好處在於價格親民,但設計師如果也願意用心,做出來的作品一定不輸大的。前提是,客戶自己必須明白自己要的是甚麼?喜好?需求?風格.......等。

[生活] 幸福新居落成

這次預售屋拖了很久,所以我們匆匆安排裝修,同時也還有一些地方需要修繕,整個忙翻天了!但仍然很滿意這個新家,不管是格局還是大小,打算至少再住個十年!

時程上原先預定於 102年12月可以交屋,拖到103年3月底才勉強交到一個差強人意仍須修繕的屋。匆匆簽了切結,就安排木工入場。木工張先生也是很配合,4月11日就幫我們正式入場,該保護的都做好保護就開始施工。

[生活] 愛惠浦淨水器濾心更換之S100

用了快兩年的愛惠浦淨水器 (Ever Pure),天才的我竟然連第一道都沒換,沒辦法嘛~濾心很貴.....orz

今天逛大潤發,問了價格馬上衝一發,3100元買一送一,一隻1550元還算可以接受。只是以我使用的速度,我猜搬家後還不會換下一隻...不過放著不用保存期限可以放三年...應該還可以吧......?!orz

總之,趁著便宜,撿便宜的心態趨使我買回家自己換濾心,人性啊人性.....順便買了一隻全適用的第一道濾心約 90元。0w0