我有table
在panel
内的modal
内呈现。由于表格相对较大,我想将其限制为5行,以便模态不会变得可滚动。我查看了SO和google以及我看到的任何地方,我需要设置overflow-y:auto
或overflow-y:scroll
才能使其正常工作,但在我的情况下,它没有。我还设置了400px的随机高度和position:absolute。这使得表格可以滚动,但现在面板以<thead>
关闭,表格的主体在面板外部呈现。解决这个问题的方法是什么?
我的代码段是:
<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>
[...... </div>
的剩余部分......]
感谢您的回复。有没有办法将滚动条缩小到仅<tbody>
,以便<thead>
保持静止?
答案 0 :(得分:14)
将其包裹在table-responsive
并设置最大高度:
.table-responsive {
max-height:300px;
}
答案 1 :(得分:5)
这是演示
#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>john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答案 2 :(得分:2)
尝试一次我给你一个例子问题
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);
}
&#13;
<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>
&#13;