HTML+設置+tr變色
標簽在HTML中常用于定義表格的行,而tr中的單元格則由 或 標簽定義。我們可以使用CSS設置表格行的背景顏色,實現表格變色的效果。 例如:
table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ddd; }上面的CSS代碼意思是,偶數行的背景顏色(從第二行開始)為 #ddd,而奇數行的背景顏色為 #f2f2f2。
另外,我們也可以通過添加class屬性來為表格特定行添加不同的樣式。
例如:
<table> <tr class="success"> <td>第一行</td> <td>第一行的數據</td> </tr> <tr class="warning"> <td>第二行</td> <td>第二行的數據</td> </tr> <tr class="danger"> <td>第三行</td> <td>第三行的數據</td> </tr> </table>上面的代碼中,我們為不同的表格行指定了不同的class屬性值,分別為 success、warning 和 danger,然后在CSS中為這些class屬性值添加不同的樣式。
例如:
.success { background-color: #dff0d8; } .warning { background-color: #fcf8e3; } .danger { background-color: #f2dede; }上面的CSS代碼意思是,當某個表格行的class屬性值為 success 時,其背景顏色為 #dff0d8,當class屬性值為 warning 時,其背景顏色為 #fcf8e3,當class屬性值為 danger 時,其背景顏色為 #f2dede。