表可水平滚动并容纳少量列

Question

我想要一个可以有一系列列的表，下面有这个css，我可以使用大量列水平滚动它：

.myTable {
    overflow:auto;
    display: block;
    width: 100%
}

但是例如2-3列，表格显示在部分页面（水平） - 不跨越。将显示更改为＆＃34;表＆＃34;使大量列的表水平溢出（滚动消失）。

两种情况如何发挥作用的任何想法？

Answer 1

我相信您希望将此表移动到一个包含overflow: scroll的包装器中，如下所示：

.wrapper {
  overflow: auto;
}
.myTable {
  width: 100%;
  text-align: center;
}

<div class="wrapper">
  <table class="myTable">
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
  </table>
</div>
<div class="wrapper">
  <table class="myTable">
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>
  </table>
</div>