如何固定表头？ 用bootstrap的响应式表格
表格想用bootstrap的，表头fixed之后，宽度会改变，有没有办法不用JS实时计算就可以实现表头固定呢？
固定表头下的效果如下
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
……
</tbody>
</table>
</div>
展开
收起
1
条回答
写回答
写回答
-
IT从业
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="renderer" content="webkit" /> <title>头部固定的表格</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" ></script> <style> body { padding-top: 100px; } #goodsList { padding: 0; height: 400px; overflow-y: scroll; } .fixTable thead { background-color: #fff; } </style> </head> <body> <div id="goodsList" class="col-xs-offset-3 col-xs-6"> <table id="textTable" class="table table-bordered scrollTable"> <thead> <tr> <th width="35%">姓名</th> <th width="25%">年龄</th> <th width="20%">性别</th> <th width="10%">身高</th> <th width="10%">体重</th> </tr> </thead> <tbody id="testTbody"></tbody> </table> </div> <script type="text/javascript"> $(document).ready(function () { var html = '', $ele = $('#testTbody'); for(var i = 0; i < 20; i++) { html += "<tr><td>123456</td><td>12345</td><td>1234</td><td>123</td><td>12</td></tr>"; } $ele.empty().append(html); $('#goodsList').scroll(function() { var id = '#' + this.id; var scrollTop = $('id').scrollTop() || $(id).get(0).scrollTop, style = { 'position': 'absolute', 'left': '0', 'right': '0', 'top': scrollTop + 'px' }; var th_width = []; $(id + ' .scrollTable th').each(function() { th_width.push(this.offsetWidth); }); if ($(id + ' .fixTable') && $(id + ' .fixTable').length) { (scrollTop === 0) ? $(id + ' .fixTable').addClass('hidden') : $(id + ' .fixTable').removeClass('hidden'); $(id + ' .fixTable').find('th').each(function(i) { // $(this).css('width', th_width[i] + 'px'); //注释掉这行在火狐下就不会抖动了 }); $(id + ' .fixTable').css(style); } else { var html = $(id + ' .scrollTable thead').get(0).innerHTML; var table = $('<table class="table table-bordered fixTable"><thead>' + html + '</thead></table>'); table.find('th').each(function(i) { // $(this).css('width', th_width[i] + 'px'); //注释掉这行在火狐下就不会抖动了 }); table.css(style); $(id).append(table); } }); }) </script> </body> </html>2019-07-17 19:33:25赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
