CSS 表格

使用 CSS 可以極大地改善 HTML 表格的外觀：

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

親自試一試

表格邊框

如需在 CSS 中設置表格邊框，請使用 border 屬性。

下例為 <table>、<th> 和 <td> 元素規定了黑色邊框：

Firstname Lastname
Bill Gates
Steve Jobs

實例

table, th, td {
  border: 1px solid black;
}

親自試一試

注意：上例中的表格擁有雙邊框。這是因為 table 和 <th> 和 <td> 元素都有單獨的邊框。

全寬表格

在某些情況下，上表似乎很小。如果您需要一個可以覆蓋整個屏幕（全寬）的表格，請為 <table> 元素添加 width: 100%：

實例

table {
  width: 100%;
}

親自試一試

雙邊框

請注意上面的表格有雙邊框。這是因為表格和 th、td 元素都有單獨的邊框。

如需刪除雙邊框，請看下面的例子。

合并表格邊框

border-collapse 屬性設置是否將表格邊框折疊為單一邊框：

Firstname Lastname
Bill Gates
Steve Jobs

實例

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

親自試一試

如果只希望表格周圍有邊框，則僅需為 <table> 指定 border 屬性：

Firstname Lastname
Bill Gates
Steve Jobs

實例

table {
  border: 1px solid black;
}

親自試一試

表格寬度和高度

表格的寬度和高度由 width 和 height 屬性定義。

下例將表的寬度設置為 100％，將 <th> 元素的高度設置為 50px：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

table {
  width: 100%;
}
th {
  height: 50px;
}

親自試一試

要創建僅占頁面一半的表，請使用 width: 50%：

實例

table {
  width: 50%;
}
th {
  height: 70px;
}

親自試一試

水平對齊

text-align 屬性設置 <th> 或 <td> 中內容的水平對齊方式（左、右或居中）。

默認情況下，<th> 元素的內容居中對齊，而 <td> 元素的內容左對齊。

要使 <td> 元素的內容也居中對齊，請使用 text-align: center：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

th {
  text-align: center;
}

親自試一試

下例使 <th> 元素中的文本左對齊：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

th {
  text-align: left;
}

親自試一試

垂直對齊

vertical-align 屬性設置 <th> 或 <td> 中內容的垂直對齊方式（上、下或居中）。

默認情況下，表中內容的垂直對齊是居中（<th> 和 <td> 元素都是）。

下例將 <td> 元素的垂直文本對齊方式設置為下對齊：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

td {
  height: 50px;
  vertical-align: bottom;
}

親自試一試

表格內邊距

如需控制邊框和表格內容之間的間距，請在 <td> 和 <th> 元素上使用 padding 屬性：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

th, td {
  padding: 15px;
  text-align: left;
}

親自試一試

水平分隔線

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

向 <th> 和 <td> 添加 border-bottom 屬性，以實現水平分隔線：

實例

th, td {
  border-bottom: 1px solid #ddd;
}

親自試一試

可懸停表格

在 <tr> 元素上使用 :hover 選擇器，以突出顯示鼠標懸停時的表格行：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

tr:hover {background-color: #f5f5f5;}

親自試一試

條狀表格

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

為了實現斑馬紋表格效果，請使用 nth-child() 選擇器，并為所有偶數（或奇數）表行添加 background-color：

實例

tr:nth-child(even) {background-color: #f2f2f2;}

親自試一試

表格顏色

下例指定了 <th> 元素的背景顏色和文本顏色：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

實例

th {
  background-color: #4CAF50;
  color: white;
}

親自試一試

響應式表格

如果屏幕太小而無法顯示全部內容，則響應式表格會顯示水平滾動條：

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

在 <table> 元素周圍添加帶有 overflow-x:auto 的容器元素（例如 <div>），以實現響應式效果：

實例

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

親自試一試

注釋：在 OS X Lion（在 Mac 上）中，滾動條默認情況下是隱藏的，并且僅在使用時顯示（即使設置了 "overflow:scroll"）。

更多實例

做一張花式表格
本例演示如何創建花式表格。
設置表格標題的位置
本例演示了如何放置表格標題。

CSS 表格屬性

屬性 描述
border 簡寫屬性。在一條聲明中設置所有邊框屬性。
border-collapse 規定是否應折疊表格邊框。
border-spacing 規定相鄰單元格之間的邊框的距離。
caption-side 規定表格標題的位置。
empty-cells 規定是否在表格中的空白單元格上顯示邊框和背景。
table-layout 設置用于表格的布局算法。