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

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

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

事實上, CSS不只準許偶數/奇數的交替, 也準許多變化的間距. ‘偶數’ 與 ‘奇數’ 的關鍵詞就只是方便的簡稱. 譬如一個長的表格,你可以如此作:

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

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

偶數與奇數列

同樣也可用于表格中的列, 但要有一個文檔對應于列中的元素. 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元素的存在) 下列規則給予第一列黃色的背景, 其次是從第三列開始的每隔一列用灰色底.

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

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

例:

<style type="text/css">

table tr:nth-child(odd) td {

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。