html - table 比带有水平滚动条的容器大

如何制作比其父容器大的表进行水平滚动：

<div style="background: pink; width: 200px">
  <table style="background: rgba(2,2,2, 0.2); width: 500px">
    <thead>
      <th>th</th>
      <th>th</th>
    </thead>
    <tbody>
      <td>cell</td>
      <td>cell</td>
    </tbody>
  </table>
</div>

我需要水平滚动的桌子。

最佳答案

在父元素上使用overflow: scroll;：

.table-container {
  background: pink;
  width: 200px;
  overflow-x: scroll;
}
.table {
  background: rgba(2,2,2, 0.2);
  width: 500px;
}

<div class="table-container">
  <table class="table">
    <thead>
      <th>th</th>
      <th>th</th>
    </thead>
    <tbody>
      <td>cell</td>
      <td>cell</td>
    </tbody>
  </table>
</div>

关于html - table 比带有水平滚动条的容器大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39396451/