# 怎么給table表格設置CSS樣式表
在網頁設計中，表格（table）是展示結構化數據的重要元素。通過CSS樣式表的修飾，可以讓表格從單調的默認樣式轉變為美觀、易讀的視覺元素。本文將詳細介紹如何通過CSS為表格設置樣式，涵蓋邊框、背景色、間距、響應式設計等核心技巧。
---
## 一、基礎表格結構
在開始樣式設計前，先確保HTML表格結構正確：
```html
<table>
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據1</td>
<td>數據2</td>
</tr>
</tbody>
</table>
通過border屬性為表格添加邊框：
table {
border-collapse: collapse; /* 合并相鄰邊框 */
width: 100%;
}
th, td {
border: 1px solid #ddd; /* 單元格邊框 */
padding: 8px; /* 內邊距 */
}
效果說明：
- border-collapse: collapse 消除雙邊框問題
- 邊框顏色建議使用淺灰色（如#ddd）提升可讀性
差異化表頭（<th>）和數據單元格（<td>）的樣式：
th {
background-color: #f2f2f2; /* 淺灰色背景 */
text-align: left; /* 文本左對齊 */
font-weight: bold;
}
td {
background-color: white; /* 白色背景 */
}
通過:nth-child()偽類實現交替行顏色：
tr:nth-child(even) {
background-color: #f9f9f9;
}
增加交互效果，鼠標懸停時高亮行：
tr:hover {
background-color: #e6f7ff; /* 淺藍色背景 */
}
為表格添加現代感的圓角：
table {
border-radius: 8px; /* 圓角半徑 */
overflow: hidden; /* 隱藏溢出部分 */
}
當數據較多時，固定表頭并允許內容滾動：
.table-container {
max-height: 400px;
overflow-y: auto;
}
thead {
position: sticky;
top: 0;
}
在小屏幕設備上添加橫向滾動：
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}
將表格轉換為卡片式布局：
@media (max-width: 500px) {
tr {
display: block;
margin-bottom: 1rem;
}
td {
display: block;
text-align: right;
}
td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
HTML需配合添加：
<td data-label="標題1">數據1</td>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e6f7ff;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>注冊日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>zhang@example.com</td>
<td>2023-01-15</td>
</tr>
<tr>
<td>李四</td>
<td>li@example.com</td>
<td>2023-02-20</td>
</tr>
</tbody>
</table>
</body>
</html>
<caption>標簽說明用途通過以上技巧，你可以創建出既美觀又實用的表格樣式。實際開發中建議結合CSS框架（如Bootstrap）或預處理器（如Sass）來進一步提高效率。 “`
（注：本文實際約1500字，可根據需要調整示例代碼部分的詳細程度）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
