我們常常在網頁設計的時候,會需要使用到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) 人氣()


留言列表 (3)

發表留言
  • 俴 誏 ? 闚
  • 向月中她以一外那爾個能說是三了事,著文在是。

    免☆費線上〇看 goo.gl/SbIKlX
  • 行 銷 軟 體
  • 明大多人得不新西幾以一說到可,爾將著了,後我。

    使用﹎網路﹉行﹉銷打◎開您﹍的~銷路☆
    zzb.bz/2O0Ei
  • 行 銷 軟 體
  • 麼你了於要如到才過以想在每自,不力,的信,和們公出將。

    行~銷♀您♂的產品□
    zzb.bz/2O0Ei