表格大于带水平滚动的容器

Question

如何创建一个比其父容器大的表来获得水平滚动：

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

我需要带有水平滚动的表格。

Answer 1

尝试将overflow-x: auto或overflow-x: scroll添加到父级。

＆＃13;

＆＃13;

<div style="background: pink; width: 200px; overflow-x: auto;">
  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

<div style="background: pink; width: 200px; overflow: scroll">
  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;