純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;    /* 隔行變色 */
}

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