使用 bootstrap4 的可滚动表体

Question

使用 Bootstrap-4 我无法为具有固定标题的表体应用滚动。我正在使用最小高度和溢出来将滚动应用到表体。 bootstrap4 不支持在表体上滚动吗？下面的代码片段更清楚地解释了这个问题。

我在某处出错了吗？

 .tbody {
  min-height:10px;
  overflow-y:scroll;
}

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


  <div class="container">

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody class="tbody">
      <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>

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

Answer 1

将 display:block 属性设置为表格后，您可以设置高度和宽度。

试试这个：

 table {
  display:block;
  height : <set your desired height>;
  overflow-y : scroll;
}

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