我试图使一个表与固定标题和一个可滚动的内容使用引导3表。
不幸的是，我发现的解决方案不工作与bootstrap或混乱的风格。
这里有一个简单的bootstrap表，但由于某种原因，我不知道tbody的高度不是10px。
height: 10px !important; overflow: scroll;
例子:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 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>
</table>
迟到的派对(我的生活的故事)，但由于这是谷歌上的第一个结果，上面没有一个让我工作，下面是我的代码
/*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;
}
在我看来，最好的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 );
} );
但是你可以用最简单的方法来创建一个scrollable <tbody>:
//configure table with fixed header and scrolling rows
$('#example').DataTable({
scrollY: 400,
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
info: false
});
对于满高的表格(页面滚动，而不是表格)
注意:我移动整个<thead>…</ header >因为在我的例子中，我有两行(标题和过滤器)
使用JS (jQuery)
$( function() {
let marginTop = 0; // Add margin if the page has a top nav-bar
let $thead = $('.table-fixed-head').find('thead');
let offset = $thead.first().offset().top - marginTop;
let lastPos = 0;
$(window).on('scroll', function () {
if ( window.scrollY > offset )
{
if ( lastPos === 0 )
{
// Add a class for styling
$thead.addClass('floating-header');
}
lastPos = window.scrollY - offset;
$thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
}
else if ( lastPos !== 0 )
{
lastPos = 0;
$thead.removeClass('floating-header');
$thead.css('transform', 'translateY(' + 0 + 'px)');
}
});
});
CSS(仅用于样式)
thead.floating-header>tr>th {
background-color: #efefef;
}
thead.floating-header>tr:last-child>th {
border-bottom: 1px solid #aaa;
}
