如何使用display：table来放置这个div滚动？

Question

我有这个样本：

link

代码HTML：

<div id="wrap">
  <div id="scrollable">
    <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>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>

CODE CSS：

#wrap{
  display:table;  //Here is the problem
  background: #F7F7F7;
}
#scrollable{
  overflow-y:auto;
}
table{
  min-width:1000px;
}

当一切正常但你不想放弃他时，你会得到“display：table”。

我想制作滚动表。

它可以做到这一点吗？实际上我想div #scrollable有滚动但没有取消"display: table"

你能帮我找到解决这个问题的方法吗？

谢谢！

Answer 1

请试试这个：

为#scrollable

提及一些高度

喜欢

#scrollable{
  overflow-y:auto;
height:100px
}

Answer 2

添加此CSS：

table{
  min-width:1000px;
  overflow-y:scroll;
   height:50px;
   display:block;
}

For Horizo​​ntal：

table{
  width:100px;
  overflow-y:scroll;
   display:block;
}

Demo

Answer 3

您可以考虑使用包装器来控制溢出，并将display：table仅应用于表元素。

以下示例。

#wrap {
  height: 100px;
  width: 450px;
  background: #F7F7F7;
  overflow-y: scroll; // make the wrapper scrollable
  overflow-x: none;
}

#table {
  display: table; // apply table layout
}

<div id="wrap">
  <div id="scrollable">
    <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>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>