Html 引导表上的滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39768189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollbar on bootstrap table
提问by blueren
I have tablethat renders inside a panelwhich is inside a modal. As the table is relatively large, I'd like to restrict it's rows to say 5 so that the modal does not become scrollable. I looked through SO and google and everywhere I see that I need to set the overflow-y:autoor overflow-y:scrollto get it to work, however in my case, it does not. I also set a random height of 400px and position:absolute. This got the table to be scrollable but now the panel closes with the <thead>and the body of the table renders outside the panel. What's the fix to this?
我table在 apanel内部渲染了一个modal. 由于表格相对较大，我想将其行限制为 5，以便模式不会变得可滚动。我查看了 SO 和 google，到处都可以看到我需要设置overflow-y:auto或overflow-y:scroll使其工作，但是在我的情况下，它没有。我还设置了 400px 的随机高度和 position:absolute。这使表格可以滚动，但现在面板关闭，<thead>表格的主体呈现在面板之外。有什么办法解决这个问题？
My code snippet is:
我的代码片段是：
<div class="modal fade">
<div class="modal-dialog " >
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-bordered>
<thead>
[........]
</thead>
<tbody style="overflow-y:auto; height:400px; position:absolute>
[.......]
</tbody>
</table>
[...the rest of the </div>s...]
[……剩下</div>的……]
EDIT
编辑
Thanks for the responses. Is there a way to narrow down the scroll bar to the <tbody>alone so that the <thead>remains static?
感谢您的回复。有没有办法将滚动条缩小到<tbody>单独的范围，以便<thead>保持静态？
回答by Zim
Wrap it in table-responsiveand set a max-height:
将它包裹起来table-responsive并设置一个最大高度：
.table-responsive {
max-height:300px;
}
回答by Anil Panwar
Here is the demo
这是演示
#collapse1{
overflow-y:scroll;
height:200px; <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Collapsible List with table</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group with table</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody >
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>回答by Samudrala Ramu
Try It Once I have Given An Example To You Question
试一试，我给你举了一个例子 问题
table,tr,th,td{
border:1px solid #dddddd;
border-collapse:collapse;
}
.tbl-header{
width:calc(100% - 17px);
width:-webkit-calc(100% - 17px);
width:-moz-calc(100% - 17px);
}<div class="tbl-header">
<table style="width:100%;">
<thead>
<tr>
<th width="50%">1</th>
<th width="50%">2</th>
</tr>
</thead>
</table>
</div>
<div style="width:100%;overflow:auto; max-height:100px;">
<table style="width:100%;">
<tr>
<td width="50%">dsada</td>
<td width="50%">dsadas</td>
</tr>
<tr>
<td>dsada</td>
<td>dsadas</td>
</tr>
<tr>
<td>dsada</td>
<td>dsadas</td>
</tr>
<tr>
<td>dsada</td>
<td>dsadas</td>
</tr>
<tr>
<td>dsada</td>
<td>dsadas</td>
</tr>
<tr>
<td>dsada</td>
<td>dsadas</td>
</tr>
</table>
</div>