使用CSS實現多個表格隔行變色十分簡單,只需要通過偽類選擇器`:nth-child(even)`和`:nth-child(odd)`來選中偶數行和奇數行,然后設置不同的背景色即可。
首先,我們可以通過以下代碼創建一個簡單的HTML表格:
現在,我們想要將這個表格的偶數行和奇數行分別設置不同的背景色。只需要在CSS文件中添加以下代碼:
姓名 | 年齡 | 性別 |
---|---|---|
張三 | 22 | 男 |
李四 | 30 | 男 |
王五 | 26 | 女 |
趙六 | 28 | 男 |
table tr:nth-child(even) { background-color: #f2f2f2; } table tr:nth-child(odd) { background-color: #ffffff; }這段代碼會選中所有偶數行和奇數行,并分別設置不同的背景色。我們也可以通過修改代碼中的`background-color`來改變背景色。 如果我們有多個表格需要設置隔行變色,也可以重復使用這段代碼,并根據需要修改其中的表格選擇器。 總的來說,使用CSS實現多個表格隔行變色是一個簡單而實用的技巧,讓表格更加易讀和美觀。