引导表上的滚动条

Question

我有 table 在 panel 内呈现，它在 modal 内。由于表格相对较大，我想将其行数限制为 5，以便模态不会变得可滚动。我浏览了 SO 和谷歌，到处我看到我需要设置 overflow-y:auto 或 overflow-y:scroll 才能让它工作，但在我的情况下，它没有。我还设置了 400 像素的随机高度和位置：绝对。这使表格可以滚动，但现在面板以 <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> s…]

---

编辑

感谢您的回复。有没有办法单独将滚动条缩小到 <tbody> 以使 <thead> 保持静态？

原文由 blueren 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将其包裹在 table-responsive 中并设置最大高度：

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

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

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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);
}

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

原文由 Samudrala Ramu 发布，翻译遵循 CC BY-SA 3.0 许可协议