Html 如何使用display:table放置此div滚动条？

我有这个样本：

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

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

如果你得到“显示：表”时，一切正常，但我不想放弃他

我想制作滚动表

它可以做到这一点吗？实际上，我希望div

#scrollable

具有滚动，但不取消

“display:table”

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

谢谢大家!

请尝试以下操作：

为#可滚动设置一些高度

像

添加以下CSS：

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

对于水平：

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

---

您可以考虑使用包装器来控制溢出并应用显示：表仅限于表元素。

下面的例子

#换行{
高度：100px；
宽度：450px；
背景：#F7F7F7；
overflow-y:scroll；//使包装器可滚动
溢出x：无；
}
#桌子{
display:table；//应用表布局
}

名字
姓氏
电子邮件
约翰
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com
七月
杜利
july@example.com
七月
杜利
july@example.com
七月
杜利
july@example.com
七月
杜利
july@example.com

在该演示链接中，用我的新表css替换该表css是否清除链接？Plaste给出了水平滚动的完整示例现在检查答案，使用演示链接抱歉，但我想水平滚动div和“wrap”有“display:table”我不能更改这两个内容您想滚动表格还是可滚动？您能解释一下您的问题吗？。

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