警告:著作此文時(shí) (2003年 2月), 主要的瀏覽器還未支持'nth-child' selector(于2001年11月引入), 而且只有少許支持COL element.

一種提高易于閱讀大型表格的方法是每排以色調(diào)交替. 譬如,下面的日期表顯示淺灰色背景的偶數(shù)排, 以及白底的奇數(shù)排. 這規(guī)則在此非常簡(jiǎn)單.

 
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

事實(shí)上, CSS不只準(zhǔn)許偶數(shù)/奇數(shù)的交替, 也準(zhǔn)許多變化的間距. ‘偶數(shù)’ 與 ‘奇數(shù)’ 的關(guān)鍵詞就只是方便的簡(jiǎn)稱. 譬如一個(gè)長(zhǎng)的表格,你可以如此作:

 
li:nth-child(5n+3) {font-weight: bold}

這就是說, 始于第三位，每第五位列表項(xiàng)目是粗體字,. 換句話說, 項(xiàng)目的第三, 八, 十三, 十八, 二十三, 等等.., 將是粗體字.

偶數(shù)與奇數(shù)列

同樣也可用于表格中的列, 但要有一個(gè)文檔對(duì)應(yīng)于列中的元素. HTML為此提供COL. 這表格必須從頭每一列有一COL:

 
<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL除了用于格式,也可用于其它方面, 但在這種情況下我們所須的只是 COL元素的存在) 下列規(guī)則給予第一列黃色的背景, 其次是從第三列開始的每隔一列用灰色底.

 
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

排的背景(TR)是先于列的背景(COL)繪制的, 因此若你要確認(rèn)列的背景的顯而易見, 你就不應(yīng)在排的背景著色.

例:

<style type="text/css">

table tr:nth-child(odd) td {

    background: none repeat scroll 00#FFFFFF;}
</style>

總結(jié)

以上是生活随笔為你收集整理的表格行的偶数与奇数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。