CSS實現表格美化及優化

一、使用CSS樣式美化表格

1、使用CSS選擇器選中表格，並設置表格的邊框寬度、樣式和顏色，如下：

table {
  border-collapse: collapse; /* 合併邊框 */
  border-width: 1px; /* 邊框寬度 */
  border-style: solid; /* 邊框樣式 */
  border-color: #ccc; /* 邊框顏色 */
}

2、為表格的奇偶行設置不同的背景色，提高表格可讀性，如下：

tr:nth-child(odd) { /* 奇數行 */
  background-color: #f9f9f9;
}
tr:nth-child(even) { /* 偶數行 */
  background-color: #fff;
}

二、使用CSS樣式優化表格

1、單元格內的文本過長時，會對表格寬度造成影響，可以使用CSS屬性 word-break 和 text-overflow 控制文本內容的顯示，如下：

td {
  white-space: nowrap; /* 防止單元格文本換行 */
  overflow: hidden; /* 超出部分隱藏 */
  text-overflow: ellipsis; /* 超出部分用省略號表示 */
  word-break: break-all; /* 單詞過長自動換行 */
}

2、當表格寬度較小時，表格可能會出現橫向滾動條，可以使用CSS屬性 min-width 設置表格的最小寬度，避免表格壓縮變形，如下：

table {
  min-width: 500px; /* 設置表格最小寬度 */
}

三、使用CSS樣式添加表格樣式

1、為表格標題添加樣式，如下：

caption {
  font-size: 16px; /* 字型大小設置 */
  font-weight: bold; /* 加粗 */
  text-align: left; /* 居左 */
}

2、為表頭單元格添加背景色和居中對齊，如下：

th {
  background-color: #ccc; /* 表頭背景色 */
  text-align: center; /* 居中對齊 */
}

3、為表格單元格添加滑鼠移上去的效果，如下：

td:hover {
  background-color: #ffff99; /* 滑鼠移上去背景色 */
}

四、使用CSS樣式合併單元格

1、使用CSS屬性 rowspan 合併表格行，如下：

<td rowspan="2">單元格內容</td>

2、使用CSS屬性 colspan 合併表格列，如下：

<td colspan="2">單元格內容</td>

五、完整示例代碼

HTML：

<table>
  <caption>表格標題</caption>
  <tr>
    <th>標題1</th>
    <th>標題2</th>
    <th>標題3</th>
  </tr>
  <tr>
    <td>內容1</td>
    <td>內容2</td>
    <td>內容3</td>
  </tr>
</table>

CSS：

table {
  border-collapse: collapse; /* 合併邊框 */
  border-width: 1px; /* 邊框寬度 */
  border-style: solid; /* 邊框樣式 */
  border-color: #ccc; /* 邊框顏色 */
  min-width: 500px; /* 設置表格最小寬度 */
}
tr:nth-child(odd) { /* 奇數行 */
  background-color: #f9f9f9;
}
tr:nth-child(even) { /* 偶數行 */
  background-color: #fff;
}
td {
  white-space: nowrap; /* 防止單元格文本換行 */
  overflow: hidden; /* 超出部分隱藏 */
  text-overflow: ellipsis; /* 超出部分用省略號表示 */
  word-break: break-all; /* 單詞過長自動換行 */
}
caption {
  font-size: 16px; /* 字型大小設置 */
  font-weight: bold; /* 加粗 */
  text-align: left; /* 居左 */
}
th {
  background-color: #ccc; /* 表頭背景色 */
  text-align: center; /* 居中對齊 */
}
td:hover {
  background-color: #ffff99; /* 滑鼠移上去背景色 */
}