表格
基本实例
为任意
<table>
标签添加
.table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
复制
<table class="table">
...
</table>
条纹状表格
通过
.table-striped
类可以给
<tbody>
之内的每一行增加斑马条纹样式。
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
复制
<table class="table table-striped">
...
</table>
带边框的表格
添加
.table-bordered
类为表格和其中的每个单元格增加边框。
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
复制
<table class="table table-bordered">
...
</table>
鼠标悬停
通过添加
.table-hover
类可以让
<tbody>
中的每一行对鼠标悬停状态作出响应。
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
复制
<table class="table table-hover">
...
</table>
紧缩表格
通过添加
.table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
复制
<table class="table table-condensed">
...
</table>
状态类
通过这些状态类可以为行或单元格设置颜色。
Class | 描述 |
---|---|
| 鼠标悬停在行或单元格上时所设置的颜色 |
| 标识成功或积极的动作 |
| 标识普通的提示信息或动作 |
| 标识警告或需要用户注意 |
| 标识危险或潜在的带来负面影响的动作 |
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
复制
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
向使用辅助技术的用户传达用意
通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现,并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此,请确保通过颜色而赋予的不同意义可以通过内容本身来表达(即在相应行或单元格中的可见的文本内容);或者通过包含额外的方式 -- 例如应用了
.sr-only
类而隐藏的文本 -- 来表达出来。
响应式表格
将任何
.table
元素包裹在
.table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
Firefox 和 fieldset
元素
fieldset
Firefox 浏览器对
fieldset
元素设置了一些影响
width
属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:
复制
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
更多信息请参考 this Stack Overflow answer.
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
复制
<div class="table-responsive">
<table class="table">
...
</table>
</div>