W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 表格



显示一个表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mike Ross 35

基础表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>
尝试一下 »

带有边框的表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-border">
尝试一下 »

条纹状表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-striped">
尝试一下 »

带有边框的条纹状表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped">
尝试一下 »

围绕条纹边框的表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-border">
尝试一下 »

翻转条纹

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

要翻转条纹,只需在表格header添加 <thead> 元素

Example

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
尝试一下 »

带有彩色表头的表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
尝试一下 »

带有颜色的表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-blue">
尝试一下 »

鼠标悬停

w3-hoverable 类在鼠标悬停时添加灰色背景颜色:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
尝试一下 »

如果要使用特定的悬停颜色,请将 w3-hover-classes 类添加到每个 <tr> 元素中:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<tr class="w3-hover-green">
尝试一下 »


表格用作卡片

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-card-4">
尝试一下 »

响应式表格

如果屏幕太小而不能显示完整的内容,响应式表格将显示一个水平滚动条。

尝试调整屏幕大小以查看效果。

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Eve Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Example

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
尝试一下 »

微表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-tiny">
尝试一下 »

小表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-small">
尝试一下 »

大表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-large">
尝试一下 »

XLarge 表格

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="w3-table w3-bordered w3-striped w3-xlarge">
尝试一下 »

XXLarge 表格

Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Example

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
尝试一下 »

XXXLarge 表格

Name Points
Smith 50
Jackson 94
Johnson 67
Nilson 35

Example

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
尝试一下 »

巨大表格

Name Points
Smith 50
Jackson 94
Johnson 67
Nilson 35

Example

<table class="w3-table w3-bordered w3-striped w3-jumbo">
尝试一下 »