css - 为比 div 宽的表格启用水平滚动条，而不指定固定宽度

Question

编辑:其实这在 Firefox 中不是问题，而是在 Chrome 中。

我正在使用 React。我有一张很宽的 table 。我有一个 div在宽度为 100% 的 table 周围。围绕其他所有内容的是另一个 Bootstrap div，它的宽度根据窗口大小进行了调整。

内部div , 我有 <div style={{width:"100%", overflow:"auto"}}> .但是没有出现水平滚动条。但是如果我突出显示表格中的文本并向右拖动，table在div里面用鼠标滚动。如何在不指定固定宽度和高度的情况下显示滚动条？ (我用固定的宽度和高度尝试过它并且它“有效”，但我不能就这样保留它，因为用户可能会调整窗口大小)。

Answer 1

如果我理解正确的话，你可以这样做:

body {margin: 0}

#container {
  width: 100%;
  height: 50vh;
  overflow: auto;
}

#container > table {
  width: 200%;
  height: 100%;
  background: Lavender;
}

<div id="container">
  <table>
    <tr>
      <td><td>
    </tr>
  </table>
</div>