CSS表格隔行變色是指利用CSS樣式來設置表格中相鄰兩行背景色不同,以增加表格的美觀度和可讀性。下面是一段CSS樣式實現(xiàn)表格隔行變色的代碼:
/*設置表格中奇數(shù)行的背景色*/ tr:nth-child(odd) { background-color: #f2f2f2; } /*設置表格中偶數(shù)行的背景色*/ tr:nth-child(even) { background-color: #fff; }
以上代碼中,tr:nth-child(odd)
表示選擇表格中奇數(shù)行(從上往下數(shù)),tr:nth-child(even)
表示選擇表格中偶數(shù)行。當表格行數(shù)為奇數(shù)時,最后一行的背景色將保持與上一行相同,即奇數(shù)行的背景色。
為了能讓上面的CSS樣式生效,需要首先在HTML中創(chuàng)建表格,并為其添加類名或ID屬性(示例中使用了ID屬性):
姓名 | 性別 | 年齡 |
---|---|---|
小明 | 男 | 20 |
小紅 | 女 | 18 |
小剛 | 男 | 22 |
小李 | 男 | 19 |
下面是一個完整的HTML文件,包含表格的HTML代碼和CSS隔行變色樣式:
姓名 | 性別 | 年齡 |
---|---|---|
小明 | 男 | 20 |
小紅 | 女 | 18 |
小剛 | 男 | 22 |
小李 | 男 | 19 |
以上就是CSS表格隔行變色的實現(xiàn)方法,可以根據(jù)需要調(diào)整背景色的顏色值和表格的ID或類名。