---

W3.CSS 表格

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

---

W3.CSS 表格类

W3.CSS 为表格提供了以下类:

类	定义
w3-table	HTML 表格的容器
w3-striped	条纹表
w3-border	边框表格
w3-bordered	边框线
w3-centered	居中表格内容
w3-hoverable	悬浮表
w3-table-all	所有属性设置

---

基本表

w3-table 类用于显示基本表格:

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

---

条纹表

w3-striped 类用于向表格添加斑马条纹:

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

---

边框表

w3-bordered 类为每个表格行添加一个底部边框:

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

---

条纹边框表

结合w3-striped 类和w3-bordered 类创建一个条纹边框表格:

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

---

表格周围的边框

w3-border 类用于显示表格周围的边框:

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

---

全部显示

w3-table-all 类结合了上述所有类:

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

---

翻转条纹

要翻转条纹（从浅灰色开始），请在表格标题行周围添加一个 <thead> 元素。 您还必须定义用于表格标题行的颜色:

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

---

居中所有内容

w3-centered 类将表格的内容居中:

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

---

使一列居中

w3-center 类将列的内容居中:

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

---

使一列右对齐

w3-right-align 类右对齐列的内容:

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

---

悬浮表

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

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

---

悬停颜色

如果您想要特定的悬停颜色，请将任何 w3-hover-color 类添加到每个 <tr> 元素:

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

---

组合 W3.CSS 类

许多 W3.CSS 类可用于所有 HTML 元素。

例如：边框类、颜色类、字体类、卡片类等。

---

彩色表格标题

使用任何 w3-color 类来显示彩色行:

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

---

彩色表格

使用任何 w3-color 类来显示彩色表格:

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

---

响应式表格

w3-responsive 类创建一个响应表。 然后表格将在小屏幕上水平滚动。 在大屏幕上观看时，没有区别。

调整屏幕大小看下表的效果:

---

卡片式表格

使用 w3-card 类将表格显示为卡片:

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

---

小表格

使用w3-tiny类来显示一个小表格:

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

---

小表格

使用w3-small类来显示一个小表格:

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

---

大表格

使用w3-large 类来显示一个大表格:

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

---

XLarge 表格

使用w3-xlarge类来显示一个 xlarge 表格:

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

---

XXLarge 表格

使用w3-xxlarge类来显示一个xxlarge表格:

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

---

xxxlarge 表格

使用w3-xxxlarge类显示 xxxlarge 表格:

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

---

超大表

使用w3-jumbo类来显示超大的大表格:

First Name	Last Name
Jill	Smith
Eve	Jackson
Adam	Johnson