最新的Web开发教程
 

W3.CSS表格

❮上一页 下一页章❯

显示表

名字 姓 点
吉尔 工匠 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">
试一试»

❮上一页 下一页章❯