我有一个(长)Bootstrap 表,我希望允许使用 overflow: auto;
进行滚动。我只希望 tbody
可以滚动,而不是 thead
内容。
请参阅this fiddle为了我的尝试。我试图在 tbody
上设置高度但未成功。
最佳答案
您不能将 tbody 设置为可滚动。您需要创建两个单独的表——一个用于标题,一个用于正文。将 body 表格包裹在一个 div 中,并设置 overflow-y 属性为滚动。
更新的 jsfiddle:http://jsfiddle.net/SzGW3/37/
标记:
<div class="scrollable">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>User</th>
<th>Rights</th>
<th></th>
</tr>
</thead>
</table>
</div>
<div class="bodycontainer scrollable">
<table class="table table-hover table">
<tbody id="user-rows">
<tr class="user-row" style="opacity: 1;">
<td>Justin</td>
<td>Administrator</td>
<td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
</td>
</tr>
<tr class="user-row" style="opacity: 1;">
<td>Sebastien</td>
<td>Administrator</td>
<td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
</td>
</tr>
<tr class="user-row" style="opacity: 1;">
<td>Steve</td>
<td>Operator</td>
<td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
</td>
</tr>
<tr class="user-row" style="opacity: 1;">
<td>Thomas</td>
<td>Administrator</td>
<td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
</td>
</tr>
<tr class="user-row" style="opacity: 1;">
<td>admin</td>
<td>Administrator</td>
<td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
</td>
</tr>
</tbody>
</table>
</div>
风格:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.scrollable {
overflow-y: scroll;
}
.bodycontainer {
height: 100px !important;
width: 100%;
}
页眉上的滚动条是为了保持宽度不变。您可以使用一些 JavaScript 来解决这个问题,但您还应该找到一些不错的 JS/JQuery 库来为您处理整个 tbody 滚动问题。
如果要为标题 cols (th) 和 cols (td) 设置相同的宽度:
table thead>tr>th{
width: 20% !important; /* 20% for 5, 25% for 4, etc */
}
table tbody>tr>td{
width: 20% !important; /* 20% for 5, 25% for 4, etc */
}
关于javascript - 滚动表(但不是 thead),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14696419/