本文目錄導(dǎo)讀：

1. 基本樣式設(shè)置
2. 表頭樣式強化
3. 隔行換色（條紋表格）
4. 鼠標(biāo)懸停效果
5. 響應(yīng)式設(shè)計

CSS中的表格樣式與美化

在網(wǎng)頁設(shè)計中，表格是展示數(shù)據(jù)的一種常見方式，通過CSS（層疊樣式表），我們可以對表格進行美化，提升其視覺效果，本文將介紹如何使用CSS來優(yōu)化表格的展示，但不涉及如何通過CSS寫表格列數(shù)。

基本樣式設(shè)置

我們可以使用CSS來設(shè)置表格的基本樣式，如邊框、背景色和字體等。

table {
  width: 100%; /* 設(shè)置表格寬度 */
  border-collapse: collapse; /* 合并邊框 */
  background-color: #f9f9f9; /* 設(shè)置背景色 */
}
th, td {
  border: 1px solid #ddd; /* 邊框樣式 */
  padding: 8px; /* 單元格內(nèi)邊距 */
  text-align: left; /* 文本對齊方式 */
}

表頭樣式強化

表頭（thead）是表格的重要組成部分，可以使用CSS為其添加特殊樣式，以突出其重要性。

thead {
  background-color: #333; /* 表頭背景色 */
  color: #fff; /* 表頭字體顏色 */
}

隔行換色（條紋表格）

通過CSS的:nth-child()偽類，我們可以為表格的奇數(shù)行和偶數(shù)行設(shè)置不同的背景色，增加視覺上的層次感。

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶數(shù)行背景色 */
}
tr:nth-child(odd) {
  background-color: #fff; /* 奇數(shù)行背景色 */
}

鼠標(biāo)懸停效果

通過CSS的:hover偽類，我們可以為表格添加鼠標(biāo)懸停時的樣式變化，增加用戶體驗。

tr:hover {
  background-color: #ddd; /* 鼠標(biāo)懸停時的背景色變化 */
}

響應(yīng)式設(shè)計

對于響應(yīng)式網(wǎng)頁，我們還需要確保表格在不同屏幕尺寸下都能良好顯示，可以使用CSS的媒體查詢（Media Queries）來實現(xiàn)這一點。

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    width: 100%; /* 在小屏幕下，使表格列數(shù)自適應(yīng)屏幕寬度 */
  }
}

通過以上幾點，我們可以使用CSS顯著提升網(wǎng)頁中表格的美觀性和用戶體驗，在實際項目中，可以根據(jù)需求靈活組合和應(yīng)用這些樣式技巧。