我试图使一个表与固定标题和一个可滚动的内容使用引导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>
使用这个链接，stackoverflow.com/a/17380697/1725764，由Hashem Qolami在原始帖子的评论和使用display:内联块，而不是浮动。
如果表也有'table-bordered'类，则修复边界。
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%;
}
}
在我看来，最好的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
});
根据@Roko C. Buljan的回答，如果你尝试添加行跨度，当你滚动时，只有第一个th会被固定。
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr>
<th rowspan="3">TH 1</th>
<th>TH 2.1</th>
<th>TH 3.1</th>
</tr>
<tr >
<th>TH 2.2</th>
<th>TH 3.2</th>
</tr>
<tr >
<th>TH 2.3</th>
<th>TH 3.3</th>
</tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
<tr><td>D1</td><td>D2</td><td>D3</td></tr>
<tr><td>E1</td><td>E2</td><td>E3</td></tr>
</tbody>
</table>
</div>
如果你想固定行跨度，你可以添加这行
.tableFixHead thead tr:nth-child(2) th {
top: 34px; /* change the number according to your need */
}
.tableFixHead thead tr:nth-child(3) th {
top: 68px; /* change the number according to your need */
}
作为示例，您可以检查这个片段
.tableFixHead { overflow: auto; height: 200px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead thead tr:nth-child(2) th {
top: 34px; /* change the number according to your need */
}
.tableFixHead thead tr:nth-child(3) th {
top: 68px; /* change the number according to your need */
}
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr>
<th rowspan="3">TH 1</th>
<th>TH 2.1</th>
<th>TH 3.1</th>
</tr>
<tr >
<th>TH 2.2</th>
<th>TH 3.2</th>
</tr>
<tr >
<th>TH 2.3</th>
<th>TH 3.3</th>
</tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
<tr><td>D1</td><td>D2</td><td>D3</td></tr>
<tr><td>E1</td><td>E2</td><td>E3</td></tr>
</tbody>
</table>
</div>
如果你用n -child(number)手动指定number，上面的代码段将正常工作
