css之使table也能overflow:hidden

要让 table 具有 overflow:hidden 的效果，可通过将 table 放置在一个具有固定宽度和 height 的容器 div 中，并设置 div 的 overflow:hidden 属性，从而实现 table 的滚动效果。具体的过程如下：

1. 首先，需要创建一个包含table的容器 div，并设置 div 的宽度和 height，以及 overflow:hidden 属性。例如：

<div class="table-container" style="width: 500px; height: 200px; overflow: hidden">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>1234567890</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>2345678901</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>35</td>
        <td>3456789012</td>
      </tr>
    </tbody>
  </table>
</div>

1. 接下来需要设置 table 的宽度和表格布局方式。在此示例中，我们将 table 的宽度设置为 100% ，以使其完全填充 div 容器，并将表格布局方式设置为 fixed，以使列宽可以固定。示例如下：

.table-container table {
  width: 100%;
  table-layout: fixed;
}

1. 最后，需要将 table 中的每一列都设置为固定宽度，以确保在容器 div 中水平滚动时，每一列的宽度都不会改变。例如，以下 CSS 代码将表格中的每一列都设置为 150px 宽度：

.table-container table th,
.table-container table td {
  width: 150px;
}

通过以上步骤，我们就可以使含有table的容器 div 具有 overflow:hidden 的效果，实现 table 的滚动效果，避免页面出现滚动条出现的问题。

下面是一个完整的代码示例，可供参考：

<style>
  .table-container {
    width: 500px;
    height: 200px;
    overflow: hidden;
  }

  .table-container table {
    width: 100%;
    table-layout: fixed;
  }

  .table-container table th,
  .table-container table td {
    width: 150px;
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>1234567890</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>2345678901</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>35</td>
        <td>3456789012</td>
      </tr>
    </tbody>
  </table>
</div>

另外，为了更好地理解该方法，以下是另外一个示例，有区别的是它是使用 table 的 wrapper div 将table包裹起来，并设置wrapper为 overflow:hidden；同时去除了设置表格布局方式为 fixed，每列的宽度在这里是设置 CSS百分比的形式：

<style>
  .table-wrapper {
    width: 500px;
    height: 200px;
    overflow: hidden;
  }

  .table-wrapper table {
    width: 200%;
  }

  .table-wrapper th,
  .table-wrapper td {
    width: 33.33%;
  }
</style>

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>1234567890</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>2345678901</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>35</td>
        <td>3456789012</td>
      </tr>
    </tbody>
  </table>
</div>

以上两个示例都可以使table滚动，选择适用的形式即可。