W3.CSS 表格

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67
博	尼尔森	50
麦克风	罗斯	35

W3.CSS 表类

W3.CSS 为表提供了以下类：

类	定义
w3表	HTML 表格的容器
w3条纹	条纹桌
w3边框	有边框的表格
w3 边框	边框线
以w3为中心	居中表格内容
w3-可悬停	可悬停的表格
w3-表全部	所有属性已设置

基本表

这个w3表类用于显示基本表：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

<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>

亲自试一试»

条纹桌

这个w3条纹类用于向表格添加斑马条纹：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

有边框的表格

这个w3 边框类为每个表格行添加底部边框：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

条纹边框表

结合w3条纹类和w3 边框类来创建条纹边框表格：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

表格周围的边框

这个w3边框类用于显示表格周围的边框：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

提示：这个w3边框类不仅仅用于表。它可以用在任何 HTML 元素上！

显示全部

这个w3-表全部类结合了上面的所有类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

翻转条纹

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

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67
博	尼尔森	35

示例

<thead>
<tr class="w3-light-grey">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
</thead>

亲自试一试»

将所有内容居中

这个以w3为中心类中心表的内容：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

将一列居中

这个w3-中心类以列的内容为中心：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>

亲自试一试»

右对齐一列

这个w3-右对齐类右对齐列的内容：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>

亲自试一试»

悬浮表格

这个w3-可悬停类在鼠标悬停时添加灰色背景颜色：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

悬停颜色

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

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

组合 W3.CSS 类

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

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

彩色表头

使用任何w3-颜色显示彩色行的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

<tr class="w3-red">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>

亲自试一试»

彩色表格

使用任何w3-颜色显示彩色表格的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

响应表

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

调整屏幕大小，查看下表中的效果：

名	姓	积分	积分	积分	积分	积分	积分	积分	积分	积分	积分	积分
吉尔	史密斯	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000
前夕	杰克逊	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400
亚当	约翰逊	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700

示例

<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>

亲自试一试»

表格作为卡片

用一个w3卡将表格显示为卡片的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

小表格

使用w3-小显示小表格的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

小表格

使用w3-小号显示小表的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

大表格

使用w3-大号显示大表的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

超大表格

使用w3-超大显示 xlarge 表的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

XX大表格

使用w3-xxlarge显示 xxlarge 表的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

XXX大表格

使用w3-xxxlarge显示 xxxlarge 表的类：

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊	94
亚当	约翰逊	67

示例

亲自试一试»

巨型表

使用w3-巨型显示巨型表的类：

名	姓
吉尔	史密斯
前夕	杰克逊
亚当	约翰逊

示例

亲自试一试»