CSS表格顏色不一樣

table {
border-collapse: collapse;
}
table th, table td {
padding: 12px;
border: 1px solid #ddd;
}
table tr:nth-child(even) {
background-color: #f2f2f2;
}
table tr:hover {
background-color: #ddd;
}
table tr:first-child {
background-color: #4CAF50;
color: white;
}

表格是網頁設計中不可缺少的一個元素，而表格的樣式和顏色是影響網頁美觀的關鍵。CSS有著強大的樣式控制能力，我們可以輕松的設置表格顏色和樣式。

在CSS中，可以使用:nth-child()選擇器對表格的每一行進行不同的樣式設置。其中:nth-child(even)表示偶數行，可以用于設置表格奇偶行不相同的顏色。例如，在上面的示例代碼中，我們使用nth-child(even)和background-color屬性為偶數行添加薄灰色(#f2f2f2)背景顏色。

還可以使用:hover偽類選擇器，根據用戶鼠標的懸停動作來修改行的背景顏色。同樣的，在上面的代碼示例中，使用:hover和background-color屬性為鼠標懸停在表格上的行添加淺灰色(#ddd)背景顏色。

最后，我們可以使用:first-child偽類選擇器，為表格的第一行添加不同的背景顏色和文字顏色。在上面的代碼示例中，我們使用:first-child和background-color屬性為第一行添加綠色(#4CAF50)背景顏色和白色文字顏色。

通過以上幾種方法，我們可以輕松地設置表格的樣式和顏色，增強網頁的美觀度。