在 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;}
的设定。
将外观选项中的着色辅助类与 .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 |