css漂亮表头

在设计网页时，表格是经常会用到的元素之一。而表格的表头则是表格中不可或缺的一部分，为了让表格的表头看起来更加漂亮，我们可以使用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漂亮表头的详细内容...