欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css實現表格隔行變色

徐佳欣1年前9瀏覽0評論

CSS實現表格隔行變色是一種常見的網頁美化技術,通過設置CSS樣式可以讓表格更加美觀易讀。

table{
border-collapse: collapse;/*合并單元格邊框*/
width: 100%;/*設置表格寬度為100%*/
}
tr:nth-child(odd){/*設置奇數行的背景顏色*/
background-color: #f5f5f5;
}
tr:nth-child(even){/*設置偶數行的背景顏色*/
background-color: #fff;
}
td, th{/*設置單元格邊框*/
border: solid 1px #ccc;
padding: 10px;
text-align: left;
}

以上代碼在table標簽上設置了邊框合并和寬度為100%,在tr:nth-child(odd)和tr:nth-child(even)上設置了交替的背景顏色。td和th標簽設置了邊框和內邊距,并將文本對齊方式設置為左對齊。經過以上樣式設置,最終的表格樣式如下:

姓名年齡性別
張三25
李四28
王五22
趙六30

通過以上代碼,我們可以很方便地實現網頁表格的隔行變色效果,提高用戶的閱讀體驗。