W3.CSS 表格
| 姓 | 名 | 分数 |
|---|---|---|
| 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 类用于显示基本表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
示例
<table class="w3-table">
<tr>
<th>姓</th>
<th>名</th>
<th>分数</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
自己尝试 »
条纹表格
w3-striped 类用于为表格添加斑马条纹
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
带边框表格
w3-bordered 类为每行表格添加底部边框
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
条纹带边框表格
将 w3-striped 类和 w3-bordered 类结合使用，创建条纹带边框表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
表格周围的边框
w3-border 类用于在表格周围显示边框
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
提示： w3-border 类不仅用于表格。它可以用于任何 HTML 元素！
全部显示
w3-table-all 类将所有上述类结合在一起
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
翻转条纹
要翻转条纹（从浅灰色开始），请在表格标题行周围添加一个 <thead> 元素。您还需要定义一个用于表格标题行的颜色
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
居中所有内容
w3-centered 类将表格内容居中
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
居中一列
w3-center 类将列内容居中
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
右对齐一列
w3-right-align 类将列内容右对齐
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
示例
<table class="w3-table-all">
<tr>
<th>姓</th>
<th>名</th>
<th class="w3-right-align">分数</th>
</tr>
自己尝试 »
可悬停表格
w3-hoverable 类在鼠标悬停时添加灰色背景颜色
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
悬停颜色
如果您想要特定的悬停颜色，请将任何 w3-hover-color 类添加到每个 <tr> 元素中
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
组合 W3.CSS 类
许多 W3.CSS 类可以用于所有 HTML 元素。
例如：边框类、颜色类、字体类、卡片类等等。
彩色表格标题
使用任何 w3-color 类来显示彩色行
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
彩色表格
使用任何 w3-color 类来显示彩色表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
响应式表格
w3-responsive 类创建响应式表格。表格将在小屏幕上水平滚动。在大型屏幕上查看时，没有任何区别。
调整屏幕大小以查看下面表格的效果
| 姓 | 名 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Eve | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
表格作为卡片
使用 w3-card 类将表格显示为卡片
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
微型表格
使用 w3-tiny 类显示微型表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
小型表格
使用 w3-small 类显示小型表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
大型表格
使用 w3-large 类显示大型表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
超大型表格
使用 w3-xlarge 类显示超大型表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
特大型表格
使用 w3-xxlarge 类显示特大型表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
巨型表格
使用 w3-xxxlarge 类显示巨型表格
| 姓 | 名 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
巨型表格
使用 w3-jumbo 类显示巨型表格
| 姓 | 名 |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
