bootstrap表头固定
原文地址:http://coding.cuikangjie.com/content/25/bootstrap%20%E8%A1%A8%E5%A4%B4%E5%9B%BA%E5%AE%9A
css:
//表头固定
.fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; height: 250px; } //每列宽度 .fixed_headers td:nth-child(1), .fixed_headers th:nth-child(1) { min- 250px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .fixed_headers td:nth-child(2), .fixed_headers th:nth-child(2) { min- 200px; } .fixed_headers td:nth-child(3), .fixed_headers th:nth-child(3) { min- 200px; } .fixed_headers td:nth-child(4), .fixed_headers th:nth-child(4) { min- 200px; } .fixed_headers td:nth-child(5), .fixed_headers th:nth-child(5) { min- 200px; } .fixed_headers td:nth-child(6), .fixed_headers th:nth-child(6) { min- 200px; } .fixed_headers td:nth-child(7), .fixed_headers th:nth-child(7) { min- 200px; } .fixed_headers td:nth-child(8), .fixed_headers th:nth-child(8) { min- 200px; }
html:
<table class="table table-hover coma-base-table fixed_headers"> <thead> <tr style="white-space: nowrap"> <th style="font-weight: bold;">被参控公司</th> <th style="font-weight: bold;">参控关系</th> <th style="font-weight: bold;">直接持股比例</th> </tr> </thead> <tbody> .......... </tbody> </table>