Bootstrap3 响应式表格

响应式表格

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

2.   
3.     
4.       
5.         #
6.         Table heading
7.         Table heading
8.         Table heading
9.         Table heading
10.         Table heading
11.         Table heading
12.       
13.     
14.     
15.       
16.         1
17.         Table cell
18.         Table cell
19.         Table cell
20.         Table cell
21.         Table cell
22.         Table cell
23.       
24.       
25.         2
26.         Table cell
27.         Table cell
28.         Table cell
29.         Table cell
30.         Table cell
31.         Table cell
32.       
33.       
34.         3
35.         Table cell
36.         Table cell
37.         Table cell
38.         Table cell
39.         Table cell
40.         Table cell
41.       
42.     
43.   

效果如图 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 上开源。