[英]Scroll table (but not thead)
I have a (long) Bootstrap table for which I want to allow for scrolling with overflow: auto;
我有一个(长)Bootstrap表,我想允许滚动
overflow: auto;
. 。 I only want the
tbody
to be scrollable, not thead
content. 我只希望
tbody
可滚动,而不是thead
内容。
Please see this fiddle for my attempt. 我的尝试请看这个小提琴 。 I have tried to set a height on
tbody
unsuccessfully. 我试图在
tbody
上设置一个高度不成功。
You can't set tbody as scrollable. 您不能将tbody设置为可滚动。 You need to create two separate tables -- one for the header and one for the body.
您需要创建两个单独的表 - 一个用于标题,一个用于正文。 Wrap the body table in a div and set the overflow-y property to scroll.
将body表包装在div中并设置overflow-y属性以进行滚动。
Updated jsfiddle: http://jsfiddle.net/SzGW3/37/ 更新了jsfiddle: http : //jsfiddle.net/SzGW3/37/
Markup: 标记:
<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>
Style: 样式:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.scrollable {
overflow-y: scroll;
}
.bodycontainer {
height: 100px !important;
width: 100%;
}
The scroll bar on the header is to keep the widths the same. 标题上的滚动条是保持宽度相同。 You can fix that with some JavaScript, but there should also be some nice JS / JQuery libraries you can find to handle the entire tbody scrolling issue for you.
你可以用一些JavaScript解决这个问题,但是你也应该找到一些很好的JS / JQuery库来处理整个tbody滚动问题。
If you want to set the same width for header cols (th) and cols (td): 如果要为标题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 */
}
This might be helpful in your case: 这可能对您的情况有所帮助:
http://www.novasoftware.com/download/jquery_fixedtable/jquery_fixedtable.aspx http://www.novasoftware.com/download/jquery_fixedtable/jquery_fixedtable.aspx
Also i give a try at fiddle it could give you a hint: 另外我试试小提琴它可以给你一个提示:
One single row and column and a div inside with overflow:auto and a fixed height and another table inside: 一个单行和一列以及一个带溢出的div:auto和固定高度以及另一个内部表:
<tbody id="user-rows">
<tr>
<td>
<div style="overflow:auto; height:10em; width:20em;">
<table >
<tr>
.
.
.
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.