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 | 女 |
通過以上代碼,我們可以很方便地實現網頁表格的隔行變色效果,提高用戶的閱讀體驗。
上一篇css實現輸入法
下一篇css實現自適應布局