6.5.6 响应式表格
响应式表格的.table-responsive
样式并不作用于表格本身,而是作用于表格所在的容器,比如我们将表格放在一个<div>
元素中,这样就应该为该<div>
元素设置class="table-responsive"
样式,这样该表格就变成了响应式表格。响应式表格在小屏幕设备上(viewport
宽度小于768px)显示时会出现水平滚动条。当viewport
宽度大于768px宽度时,水平滚动条消失。
响应式表格被设置了overflow-y:hidden
属性,这样能将超出表格底部和顶部的内容截断。但这样也会截断下拉菜单和其他第三方组件。
程序示例
下面代码示范了响应式表格。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 响应式表格 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="table-responsive"> <table class="table table-border table-hover"> <caption> <b>疯狂体系图书</b> </caption> <thead> <tr> <th>书名</th> <th>作者</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td>疯狂Java讲义</td> <td>李刚</td> <td>109</td> </tr> <tr> <td>疯狂HTML 5/CSS 3/JavaScript讲义是一本前端开发的基础图书</td> <td>李刚</td> <td>79</td> </tr> <tr> <td>疯狂前端开发讲义</td> <td>李刚</td> <td>79</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" style="text-align:right">现总计:9本图书</td> </tr> </tfoot> </table> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
响应式表格在Firefox
浏览器中显示时会有些问题,Firefox
浏览器对<fieldset>
元素设置了一些影响width
属性的样式,导致响应式表格会出现问题。可通过添加如下CSS
代码来解决该问题(该代码并未集成在Bootstrap
中):
读者小蓝注:这个问题不知道是否还存在,可能火狐已经解决了这个bug
,后面有空再验证.
1 2 3 4
| @-moz-document url-prefix() { fieldset{display: table-cell;} }
|
原文链接: 6.5.6 响应式表格