Bootstrap3 响应式表格

响应式表格

将任何.table元素包裹在.table-responsive容器中，即可创建响应式表格，它在屏幕宽度小于768px的设备上会出现水平滚动条。当屏幕宽度大于 768px 时，水平滚动条消失。如：

1. <div class="table-responsive">
2.   <table class="table table-bordered">
3.     <thead>
4.       <tr>
5.         <th>#</th>
6.         <th>Table heading</th>
7.         <th>Table heading</th>
8.         <th>Table heading</th>
9.         <th>Table heading</th>
10.         <th>Table heading</th>
11.         <th>Table heading</th>
12.       </tr>
13.     </thead>
14.     <tbody>
15.       <tr>
16.         <th scope="row">1</th>
17.         <td>Table cell</td>
18.         <td>Table cell</td>
19.         <td>Table cell</td>
20.         <td>Table cell</td>
21.         <td>Table cell</td>
22.         <td>Table cell</td>
23.       </tr>
24.       <tr>
25.         <th scope="row">2</th>
26.         <td>Table cell</td>
27.         <td>Table cell</td>
28.         <td>Table cell</td>
29.         <td>Table cell</td>
30.         <td>Table cell</td>
31.         <td>Table cell</td>
32.       </tr>
33.       <tr>
34.         <th scope="row">3</th>
35.         <td>Table cell</td>
36.         <td>Table cell</td>
37.         <td>Table cell</td>
38.         <td>Table cell</td>
39.         <td>Table cell</td>
40.         <td>Table cell</td>
41.       </tr>
42.     </tbody>
43.   </table>
44. </div>

效果如图 2‑46所示：

图2-46 响应式表格

响应式表格使用了overflow-y: hidden属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

Firefox 浏览器对fieldset元素设置了一些影响width属性的样式，导致响应式表格出现问题。可以使用以下针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

1. @-moz-document url-prefix() {
2.   fieldset { display: table-cell; }
3. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。