純CSS打造隔行變色表格

純CSS打造隔行變色表格45 Replies

不知道各位用過Excel沒有？在處理大量資料的時候，Excel隔行變色的設計是不是讓你舒服很多？
現在網上有很多利用jQuery製作隔行變色表格的教程，但你認為為了小小的一個表格而載入50多k的js是否值得？即使貴站有大量表格，其實還不如用CSS方便。要知道這個效果到底有多方便，看下去就知道了。
首先寫好表格內容，通常如下：

<table class="datalist" summary="list of members in EE Studay"><caption>Member List</caption><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr>............................................<tr><td>lightyear</td><td>W311</td><td>Mar 23th</td><td>Aries</td><td>1002908</td></tr></table>

告訴你，這樣的表格是只能用JavaScript或者jQuery做出隔行變色的效果。要用純CSS打造隔行變色效果的話，我們要對錶格做一點小改造。改成下面這種形式：

<table class="datalist" summary="list of members in EE Studay"><caption>Member List</caption><tr><th scope="col">Name</th><th scope="col">Class</th><th scope="col">Birthday</th><th scope="col">Constellation</th><th scope="col">Mobile</th></tr><tr><!-- 奇數行 --><td>isaac</td><td>W13</td><td>Jun 24th</td><td>Cancer</td><td>1118159</td></tr><tr class="altrow"><!-- 偶數行 --><td>girlwing</td><td>W210</td><td>Sep 16th</td><td>Virgo</td><td>1307994</td></tr>.................................................</table>

嗯，懂一點CSS和HTML的朋友應該知道下一步怎麼做了。不懂的同學，可以聽我解析一下，tr標籤在HTML語言裡代表表格的行，td標籤代表列。接下來就開始寫CSS，如下：

.datalist{
    border:1px solid #0058a3;    /* 表格邊框 */
    font-family:Arial;
    border-collapse:collapse;    /* 邊框重疊 */
    background-color:#eaf5ff;    /* 表格背景色 */
    font-size:14px;
}
.datalist caption{
    padding-bottom:5px;
    font:bold 1.4em;
    text-align:left;
}
.datalist th{
    border:1px solid #0058a3;    /* 行名稱邊框 */
    background-color:#4bacff;    /* 行名稱背景色 */
    color:#FFFFFF;                /* 行名稱顏色 */
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:12px; padding-right:12px;
    text-align:center;
}
.datalist td{
    border:1px solid #0058a3;    /* 儲存格邊框 */
    text-align:left;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
    background-color:#c7e5ff;    /* 隔行變色 */
}

有留意到那個邊框重疊的屬性嗎？傳說中的細線表格就是這麼弄出來的。
好好消化一下，無論是隔行變色還是隔列變色，隔一行還是隔兩行······相信什麼樣式的表格你都能做出來了。
本例效果最終如本文配圖。