显示表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
博 | 尼尔森 | 50 |
麦克风 | 罗斯 | 35 |
基本表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 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>
试一试»
边框的表格
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-border">
试一试»
条纹表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-striped">
试一试»
界定条纹表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped">
试一试»
边框条带表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-border">
试一试»
翻转条纹
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
要翻转条纹,只需添加<THEAD>表头围:
例
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
试一试»
表用彩色标题
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<thead>
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
</thead>
试一试»
表颜色
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-blue">
试一试»
Hoverable表
在W3-hoverable类将鼠标悬停灰色背景色:
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-border
w3-hoverable">
试一试» 如果你想要一个特定的悬停颜色,添加任何的W3-悬停类每个<TR>元素:
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<tr class="w3-hover-green">
试一试»
表作为卡
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-card-4">
试一试»
响应表
如果屏幕太小,无法显示完整的内容回应式表会显示一个水平滚动条。
尝试调整屏幕上看到的效果。
名字 | 姓 | 点 | 点 | 点 | 点 | 点 | 点 | 点 | 点 | 点 | 点 | 点 | 点 | 点 |
---|
吉尔 | 工匠 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
前夕 | 杰克逊 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
亚当 | 约翰逊 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
例
<div class="w3-responsive">
<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>
</div>
试一试»
小桌子
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-tiny">
试一试»
小桌子
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-small">
试一试»
大表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-large">
试一试»
XLARGE表
名字 | 姓 | 点 |
---|
吉尔 | 工匠 | 50 |
前夕 | 杰克逊 | 94 |
亚当 | 约翰逊 | 67 |
例
<table class="w3-table w3-bordered w3-striped w3-xlarge">
试一试»
XXLarge表
名称 | 点 |
---|
吉尔·史密斯 | 50 |
伊芙·杰克逊 | 94 |
亚当·约翰逊 | 67 |
尼尔森博 | 35 |
例
<table class="w3-table w3-bordered w3-striped w3-xxlarge">
试一试»
XXXLarge表
名称 | 点 |
---|
工匠 | 50 |
杰克逊 | 94 |
约翰逊 | 67 |
尼尔森 | 35 |
例
<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
试一试»
巨型表
名称 | 点 |
---|
工匠 | 50 |
杰克逊 | 94 |
约翰逊 | 67 |
尼尔森 | 35 |
例
<table class="w3-table w3-bordered w3-striped w3-jumbo">
试一试»