zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。
470 lines (429 loc) • 9.08 kB
Markdown
section: component
id: table
description: 美观实用的表格
icon: icon-table
filter: biaoge bg table-bordered table-borderless table-auto table-striped table-hover
---
# 表格
## 基本类型
<div class="example">
<table class="table">
<thead>
<tr>
<th class="col-md-2">名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>表头 <code><thead></code></td>
<td>
一般表格的第一行作为表头,用于描述表中每一列数据名称。为区别于表格其他行,表头具备不同的样式,例如字体加粗等。在垂直显示一组数据的表格中,表头也可能是垂直的第一列,而不是行。</td>
</tr>
<tr>
<td>内容 <code><tbody></code></td>
<td>
一般内容会在单元格内靠左对齐,对于数字可能靠右对齐比较好。在一些表格中,内容可以按单元格选择或者按行选择,选中的部分会以不同的样式区分。为了使得行与行便于区分,通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。</td>
</tr>
<tr>
<td>表尾 <code><tfoot></code></td>
<td>与表头作用相同,或者用来放置与表相关补充数据或操作。</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</tfoot>
</table>
</div>
```html
<table class="table">
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tfoot>
</table>
```
## 隔行交替样式
`.table-striped`
<div class="example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table table-striped">
...
</table>
```
## 响应鼠标悬停
`.table-hover`
<div class="example">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table table-hover">
...
</table>
```
## 带所有边框的表格
`.table-bordered`
<div class="example">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
<pre><code><table class="table <em>table-bordered</em>">
...
</table></code></pre>
</div>
## 不带边框的表格
`.table-borderless`
<div class="example">
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
<pre><code><table class="table <em>table-borderless</em>">
...
</table></code></pre>
</div>
## 自动宽度的表格
`.table-auto`
将表格的宽度设置为 `auto`,但最大宽度不超过 `100%`。
<div class="example">
<table class="table table-auto">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>catouse</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<td>2</td>
<td>jay</td>
<td>thks</td>
<td>jajaja</td>
</tr>
<tr>
<td>3</td>
<td>JK row</td>
<td>thks</td>
<td>Pa</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table table-auto">
...
</table>
```
## 更为紧凑的表格
`.table-condensed`
<div class="example">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>catouse</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<td>2</td>
<td>jay</td>
<td>thks</td>
<td>jajaja</td>
</tr>
<tr>
<td>3</td>
<td>JK row</td>
<td>thks</td>
<td>Pa</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table table-condensed">
...
</table>
```
## 固定布局的表格
`.table-fixed`
将表格的 `table-layout` 属性设置为 `fixed`。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
<div class="example">
<table class="table table-fixed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>catouse</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<td>2</td>
<td>jay</td>
<td>thks</td>
<td>jajaja</td>
</tr>
<tr>
<td>3</td>
<td>JK row</td>
<td>thks</td>
<td>Pa</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table table-fixed">
...
</table>
```
## 色彩主题
可以根据语义标记整行或者某一单元格
<div class="example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>描述</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>表示成功或积极的行为。</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="danger">
<td>2</td>
<td>表示一个危险或存有潜在危险的行为。</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>表示警告,可能需要注意。</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="active">
<td>4</td>
<td>标记为激活行。</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table">
<tbody>
<tr class="success">
...
</tr>
<tr class="danger">
...
</tr>
<tr class="warning">
...
</tr>
<tr class="active">
...
</tr>
</tbody>
</table>
```
## 响应式表格
将 `.table` 包裹在 `.table-responsive` 容器元素内即可实现响应式表格。当设备屏幕宽度小于 `768px` 时,表格内容会禁用换行,当宽度不够时,允许在水平方向上进行滚动以浏览所有列。
```html
<div class="table-responsive">
<table class="table">
...
</table>
</div>
```