在引导程序中带有固定标题的可滚动表
我正在尝试使用引导3表使用固定标题和可滚动内容。 不幸的是我find的解决scheme不适用于bootstrap或弄乱风格。
这里有一个简单的bootstrap表，但由于某种原因，我不知道tbody的高度不是10px。
height: 10px !important; overflow: scroll; http://jsfiddle.net/T9Bhm/1/
这是工作解决scheme
HTML
<table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody>
CSS
table { width: 100%; } thead, tbody, tr, td, th { display: block; } tr:after { content: ' '; display: block; visibility: hidden; clear: both; } thead th { height: 30px; /*text-align: left;*/ } tbody { height: 120px; overflow-y: auto; } thead { /* fallback */ } tbody td, thead th { width: 19.2%; float: left; }
链接到jsfiddle
很可能你会在一个页面上得到多个表，所以你需要CSS类。 请为此find一个修改的@ giulio的解决scheme。
只需在表格中声明：
<table class="table table-striped header-fixed"></table>
CSS
.header-fixed { width: 100% } .header-fixed > thead, .header-fixed > tbody, .header-fixed > thead > tr, .header-fixed > tbody > tr, .header-fixed > thead > tr > th, .header-fixed > tbody > tr > td { display: block; } .header-fixed > tbody > tr:after, .header-fixed > thead > tr:after { content: ' '; display: block; visibility: hidden; clear: both; } .header-fixed > tbody { overflow-y: auto; height: 150px; } .header-fixed > tbody > tr > td, .header-fixed > thead > tr > th { width: 20%; float: left; }
请注意，目前的实施只适用于五列。 如果您需要不同的数字，请将宽度参数从20％更改为* 100％/ number_of_columns *。
我在GitHub上使用StickyTableHeaders ，它的作用像魅力！
我不得不添加这个CSS来使头不透明。
table#stickyHeader thead { border-top: none; border-bottom: none; background-color: #FFF; }
不需要将它包裹在一个div中
CSS ：
tr { width: 100%; display: inline-table; table-layout: fixed; } table{ height:300px; // <-- Select the height of the table display: -moz-groupbox; // Firefox Bad Effect } tbody{ overflow-y: scroll; height: 200px; // <-- Select the height of the body width: 100%; position: absolute; }
Bootply ： http ： //www.bootply.com/AgI8LpDugl
在我看来，jQuery最好的插件之一就是DataTables 。
它也有一个固定头扩展，它很容易实现。
从他们的网站采取：
HTML：
<table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> </tbody> </table>
JavaScript的：
$(document).ready(function() { var table = $('#example').DataTable(); new $.fn.dataTable.FixedHeader( table ); } );
但是最简单的做一个可滚动的<tbody>是：
//configure table with fixed header and scrolling rows $('#example').DataTable({ scrollY: 400, scrollCollapse: true, paging: false, searching: false, ordering: false, info: false });
晚会（我的生活故事），但因为这是谷歌的第一个结果，并没有上述让我工作，这是我的代码
/*Set a min width where your table start to look like crap*/ table { min-width: 600px; } /*The next 3 sections make the magic happen*/ thead, tbody tr { display: table; width: 100%; table-layout: fixed; } tbody { display: block; max-height: 200px; overflow-x: hidden; overflow-y: scroll; } td { overflow: hidden; text-overflow: ellipsis; } /*Use the following to make sure cols align correctly*/ table, tr, th, td { border: 1px solid black; border-collapse: collapse; } /*Set your columns to where you want them to be, skip the one that you can have resize to any width*/ th:nth-child(1), td:nth-child(1) { width: 85px; } th:nth-child(2), td:nth-child(2) { width: 150px; } th:nth-child(4), td:nth-child(4) { width: 125px; } th:nth-child(5) { width: 102px; } td:nth-child(5) { width: 85px; }
你应该尝试使用“显示：块;” 因为现在它是内联块，为了设置高度，元素应该是“块”
使stickytableheaders库工作，我有很多麻烦。 做了一些更多的search，我发现floatThead是一个积极维护的替代品，最近的更新和更好的文档。
使用链接， stackoverflow.com/ a/17380697/1725764，由哈希姆Qolami在原来的post的评论和使用显示：内联块，而不是浮动。 如果表格也具有“表格边界”类，则修复边界。
table.scroll { width: 100%; &.table-bordered { td, th { border-top: 0; border-right: 0; } th { border-bottom-width: 1px; } td:first-child, th:first-child { border-right: 0; border-left: 0; } } tbody { height: 200px; overflow-y: auto; overflow-x: hidden; } tbody, thead { display: block; } tr { width: 100%; display: block; } th, td { display: inline-block; } td { height: 46px; //depends on your site } }
然后只需添加td和th的宽度
table.table-prep { tr > td.type, tr > th.type{ width: 10%; } tr > td.name, tr > th.name, tr > td.notes, tr > th.notes, tr > td.quantity, tr > th.quantity{ width: 30%; } }
你可以放置两个div，第一个div（Header）将会有透明的滚动条，第二个div将会有可见/自动滚动条的数据。 示例包含用于循环数据的angular码代码片段。
下面的代码为我工作 –
<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;"> <div class="row"> <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div> <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div> <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div> </div> </div> <div class="container-fluid" style="height: 150px; overflow-y: auto"> <div> <div class="row" ng-repeat="row in rows"> <div class="col-lg-3 col-xs-3">{{row.col1}}</div> <div class="col-lg-6 col-xs-6">{{row.col2}}</div> <div class="col-lg-3 col-xs-3">{{row.col3}}</div> </div> </div> </div>
额外的样式来隐藏标题滚动条 –
<style> #transparentScrollbarDiv::-webkit-scrollbar { width: inherit; } /* this targets the default scrollbar (compulsory) */ #transparentScrollbarDiv::-webkit-scrollbar-track { background-color: transparent; } /* the new scrollbar will have a flat appearance with the set background color */ #transparentScrollbarDiv::-webkit-scrollbar-thumb { background-color: transparent; } /* this will style the thumb, ignoring the track */ #transparentScrollbarDiv::-webkit-scrollbar-button { background-color: transparent; } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */ #transparentScrollbarDiv::-webkit-scrollbar-corner { background-color: transparent; } /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */ </style>
这是我如何使用可滚动的行和列来制作固定的表头。 列也是固定的宽度， http://codepen.io/abhilashn/pen/GraJyp
<!-- Listing table --> <div class="row"> <div class="col-sm-12"> <div class="cust-table-cont"> <div class="table-responsive"> <table border="0" class="table cust-table"> <thead> <tr style=""> <th style="width:80px;">#</th> <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th> <th style="width:250px;">Title</th> <th style="width:200px;">Company</th> <th style="width:100px;">Priority</th> <th style="width:120px;">Type</th> <th style="width:150px;">Assigned to</th> <th style="width:120px;">Status</th> </tr> </thead> <tbody> <tr> <th style="width:80px;">1</th> <td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td style="width:250px;">Lorem ipsum dolor sit</td> <td style="width:200px;">lorem ispusm</td> <td style="width:100px;">high</td> <td style="width:120px;">lorem ipsum</td> <td style="width:150px;">lorem ipsum</td> <td style="width:120px;">lorem ipsum</td> </tr> <tr> <th scope="row">2</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">3</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">4</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">5</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">6</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">7</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">8</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">9</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">10</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">11</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> <tr> <th scope="row">12</th> <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td> <td>Lorem ipsum dolor sit</td> <td>lorem ispusm</td> <td>high</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> </tbody> </table> </div> </div> <!-- End of cust-table-cont block --> </div> </div> <!-- ENd of row -->
.cust-table-cont { width:100%; overflow-x:auto; } .cust-table-cont .table-responsive { width:1190px; } .cust-table { table-layout:fixed; } .cust-table thead, .cust-table tbody { display: block; } .cust-table tbody { max-height:620px; overflow-y:auto; }
