在設計網頁時,表格是經常會用到的元素之一。而表格的表頭則是表格中不可或缺的一部分,為了讓表格的表頭看起來更加漂亮,我們可以使用CSS進行美化。
/* 表頭樣式 */ table thead th { background-color: #3498db; color: #ffffff; font-weight: bold; text-align: center; border: 1px solid #dddddd; }
上述代碼中,我們對表頭使用了 上述代碼中,我們使用了 上述代碼中,我們對表格中的奇偶行分別進行了背景色的設定,以達到交替變色的效果。這樣做可以更好地區分表格中各行的數據,提高表格的可讀性。 在實際使用中,表格的表頭是表格中最先引人注目的地方,我們可以根據實際需要,對表頭進行適當的美化,增強頁面的視覺效果。table thead th
選擇器。這意味著我們選中了所有表格中表頭所在的標簽中的標簽。我們設置了背景色為藍色,文字顏色為白色,加粗字體,居中對齊并設置了邊框。 /* 鼠標懸停樣式 */
table thead th:hover {
background-color: #2980b9;
color: #ffffff;
}
table thead th:hover
選擇器設定了鼠標懸停在表頭上時的樣式。我們將背景色的深淺進行了調整,并將字體顏色設為白色。/* 奇偶行變色 */
table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
table tbody tr:nth-child(even) {
background-color: #ffffff;
}
下一篇css漂亮陰影邊框