风格 – 表格
默认风格
对于基本的样式 – 浅色填充和仅水平分隔线 – 添加基类.table 到任何 <table>.
| # | 姓 | 名 | 用户名 |
|---|---|---|---|
| 1 | 张 | 三 | @mdo |
| 2 | 李 | 四 | @fat |
| 3 | 王 | 五 |
<table> … </table>
可选 classes
将以下任何类添加到 .table 基本类中。
.table-striped
通过:nth-child CSS选择器(不适用于IE7-8)将zebra-striping添加到 <tbody> 的任何表行。
| # | 姓氏 | 名字 | 用户名 |
|---|---|---|---|
| 1 | 张 | 三 | @mdo |
| 2 | 李 | 四 | @fat |
| 3 | 王 | 五 |
<table> … </table>
.table-bordered
为表格添加边框和圆角。
| # | 姓氏 | 名字 | 用户名 |
|---|---|---|---|
| 1 | 张 | 三 | @mdo |
| 李 | 四 | @TwBootstrap | |
| 2 | 王 | 五 | @fat |
| 3 | 赵六 | ||
<table> … </table>
.table-hover
在 <tbody>内的表格行上启用悬停状态。
| # | 姓氏 | 名字 | 用户名 |
|---|---|---|---|
| 1 | 张 | 三 | @mdo |
| 2 | 李 | 四 | @fat |
| 3 | 王五 | ||
<table> … </table>
.table-condensed
使得通过切割单元格填充在半表更紧凑。
| # | 姓氏 | 名字 | 用户名 |
|---|---|---|---|
| 1 | 张 | 三 | @mdo |
| 2 | 李 | 四 | @fat |
| 3 | 王五 | ||
<table> … </table>
可选行classes
使用上下文类为表格行着色。
| 类 | 描述 |
|---|---|
.success |
表示成功或积极的操作。 |
.error |
表示有危险或潜在的负面行为。 |
.warning |
表示可能需要注意的警告。 |
.info |
用作默认样式的替代。 |
| # | 产品 | 付款时间 | 状态 |
|---|---|---|---|
| 1 | TB – Monthly | 01/04/2012 | 批准 |
| 2 | TB – Monthly | 02/04/2012 | 拒绝 |
| 3 | TB – Monthly | 03/04/2012 | 待定 |
| 4 | TB – Monthly | 04/04/2012 | 打电话确认 |
...
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>批准</td>
</tr>
...
支持的表格标记
支持的表格标记
| 标签 | 描述 |
|---|---|
<table> |
用于以表格格式显示数据的环绕元素 |
<thead> |
表标题行的容器元素 (<tr>) 标记表列 |
<tbody> |
表格正文中的表格行 (<tr>) 的容器元素 |
<tr> |
一组表格单元格 (<td> or <th>) 出现在单个行上的容器元素 |
<td> |
默认表格单元格 |
<th> |
列的特殊表格单元(或行,取决于范围和布局)标签必须在<thead>内使用 |
<caption> |
描述或摘要,特别适用于屏幕阅读器 |
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>