Bootstrap 表格上的滚动条

Question

我有一个 table，它在一个包含在一个 modal 中的 panel 内渲染。由于表格相对较大，我想将其行数限制为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> 保持静态？

- blueren

---

将样式放在具有类panel-body的div上，设置overflow-y:scroll; height:200px; 请参见下面的答案中的演示。 - Anil Panwar

你的源代码中是否也存在表类上缺少结束引号的问题，或者那只是在这个问题中裁剪代码时的产物？ - Mr Lister

Answer 1

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

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

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

- Zim

---

我查看了你分享的代码。它似乎为整个面板添加了滚动条。我想要的是只为表格添加滚动条。将table-responsive从面板移动到<tbody>似乎行不通。 - blueren

我们不想为表头添加滚动条。 - Samudrala Ramu

我会按照这种方式进行实现，因为这是我见过的最干净的解决当前问题的方法。我尝试过让标题保持静态而正文可滚动，但遇到了调整大小的问题。我接受这个答案。如果我找到更好的方法，我会在这里发布答案。谢谢@ZimSystem。 - blueren

如果其他人想要水平滚动，请注意：将任何 .table 包装在 .table-responsive 中，以使它们在小设备（小于 768 像素）上水平滚动，从而创建响应式表格。 在查看大于 768 像素宽的任何内容时，您将不会在这些表格中看到任何差异。 - Madbreaks

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>[e-mail]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
      </div>
    </div>
  </div>
</div>

- Anil Panwar

---

谢谢Anil。有没有办法让<thead>保持静态？ - blueren

你可以将样式位置设置为fixed或static。 - Anil Panwar

@AnilPanwar，那不起作用。Fixed将其放在表格中央，而static对THEAD没有影响。 - toddmo

Answer 3

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>

- Samudrala Ramu

---

不错。所以你的方法基本上是有两个表，一个代表<thead>，另一个代表<tbody>。我会尝试一下，看看是否可行。虽然，我还是更喜欢它们成为一个单独的表格！ - blueren

经典问题：列不对齐。 - toddmo