我們常常在網頁設計的時候,會需要使用到Table表格來排版,有時候多少需要加一點顏色來美化

今天要教大家的是僅透過簡單的CSS語法,來讓Table表格達到奇偶底色相間,整個語法不需要用到任何javascript,但是,僅限使用在IE7版本以上,若IE7以下恐怕還是不支援(不過這年頭IE7以下直接可以捨棄掉了),但即使是如此,還是不影響整個程式上的運作,頂多也只是美觀上的問題而已。

首先,很簡單,僅需要加上以下兩行CSS語法,就可以達到Table的奇偶底色相間:

20140921_1  

    <style>
    tr:nth-child(even) {
    	background: #CCC
    }
    tr:nth-child(odd) {
    	background-color: #FAFAFA;
    }
    </style>
    

接下來,我再加上表格的border語法,讓他有邊框:

20140921_4  

    table {
    	border: 1px solid #666;
    	border-collapse: collapse;
    }
    

但這樣只有表格的邊邊有線框,所以我們再加上儲存格的邊框語法,這樣就更好看了一些:

20140921_2  

    tr, td {
    	border: 1px solid #666;
    }
    

最後,我們還可以加上滑鼠移過後,會有不一樣的底色,整個Table的美化就大功告成了:

20140921_3  

    td:hover {
    	background-color: #E6FBFF;
    }
    

你看,是不是很簡單呢?

 

文章標籤

創作者介紹
創作者 英傑銳數位設計 的頭像
英傑銳數位設計

英傑銳網路數位設計

英傑銳數位設計 發表在 痞客邦 留言(3) 人氣()