引导表上的滚动条

Question

我有table一个panel内部渲染modal.由于表格相对较大,我想将它的行限制为5,以便模态不会变得可滚动.我浏览了SO和谷歌以及我发现我需要设置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>保持静止状态？

Answer 1

包裹它table-responsive并设置最大高度:

.table-responsive {
    max-height:300px;
}

http://www.codeply.com/go/S6MgKWqFvj

Answer 2

这是演示

#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>