基本用法

在 table 元素上使用 .table。在 <tr> 上使用 .active 来表示激活的行。

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30
ID 名称 积分 排名 
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>积分</th>
      <th>排名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1526</td>
      <td>小马虎</td>
      <td>1056</td>
      <td class="text-red"><i class="icon icon-double-angle-up"></i> 1 </td>
    </tr>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>
更紧凑的表格

一起使用 .compact 与 .table。

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30
ID 名称 积分 排名 
<table class="table compact">
  ...
</table>
移除边框

一起使用 .borderless 与 .table。

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30
ID 名称 积分 排名 
<table class="table borderless">
  ...
</table>
完整边框

一起使用 .bordered 与 .table。

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30
ID 名称 积分 排名 
<table class="table bordered">
  ...
</table>
隔行交替样式

一起使用 .striped 与 .table。

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30
ID 名称 积分 排名 
<table class="table striped">
  ...
</table>
固定布局

使用 .table-fixed 来更改表格布局算法，使用固定布局，列宽不再由表格内容决定，禁用单元格内内容换行，超出的内容将被隐藏。

在 <tr> 或 <td> 上使用 .no-table-fixed 来移除单个单元格内 {overflow: hidden;} 的设定。

参考：MDN: table-layout

外观选项

将外观选项中的着色辅助类与 .table一起使用。

外观选项用法参考 基础 > 外观 章节。以下列举的常见用法。

.table.primary.striped

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30

.table.red.borderless.striped

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30

外观选项可以应用在行 <tr> 上或单元格 <td> 上。

ID 名称 积分 排名
1526 小马虎 1056 1
1001 勇敢的小鸭 999 12
1045 鸡大爷 998 23
1025 猪无畏 860 25
1102 糊涂虫 749 30