×

HOW TO CONTACT

1 Login or create new account.
2 Review your order.
3 Payment & FREE shipment

If you still have problems, please let us know, by sending an email to support@website.com . Thank you!

SHOWROOM HOURS

Mon-Fri 9:00AM - 6:00AM
Sat - 9:00AM-5:00PM
Sundays by appointment only!

风格 - 表格

默认风格

对于基本的样式 - 浅色填充和仅水平分隔线 - 添加基类.table 到任何 <table>.

# 用户名
1 @mdo
2 @fat
3 @twitter
<table>
  …
</table>

可选 classes

将以下任何类添加到 .table 基本类中。

.table-striped

通过:nth-child CSS选择器(不适用于IE7-8)将zebra-striping添加到 <tbody> 的任何表行。

# 姓氏 名字 用户名
1 @mdo
2 @fat
3 @twitter
<table>
  …
</table>

.table-bordered

为表格添加边框和圆角。

# 姓氏 名字 用户名
1 @mdo
@TwBootstrap
2 @fat
3 赵六 @twitter
<table>
  …
</table>

.table-hover

在 <tbody>内的表格行上启用悬停状态。

# 姓氏 名字 用户名
1 @mdo
2 @fat
3 王五 @twitter
<table>
  …
</table>

.table-condensed

使得通过切割单元格填充在半表更紧凑。

# 姓氏 名字 用户名
1 @mdo
2 @fat
3 王五 @twitter
<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>
向上