如何解决表格设置overflow:auto与width=100%的显示矛盾？

我尝试为表格设置overflow: auto和width="100%"，测试了以下两种情况：

情况1：表格设置display: table #

table {
  display: table;
  width: 100%;
  overflow: auto;
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  white-space: nowrap
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Overflow Example</title>
</head>

<body>

  <p>Table 1</p>
  <table>
    <tbody>
      <tr>
        <td>row 1 - column 1</td>
        <td>row 1 - column 2</td>
      </tr>
      <tr>
        <td>row 2 - column 1</td>
        <td>row 2 - column 2</td>
      </tr>
    </tbody>
  </table>

  <p>Table 2</p>
    <table>
      <tbody>
        <tr>
          <td>row 1 - column 1</td>
          <td>row 1 - column 2</td>
          <td>row 1 - column 3</td>
          <td>row 1 - column 4</td>
          <td>row 1 - column 5</td>
          <td>row 1 - column 6</td>
          <td>row 1 - column 7</td>
          <td>row 1 - column 8</td>
          <td>row 1 - column 9</td>
          <td>row 1 - column 10</td>
        </tr>
        <tr>
          <td>row 2 - column 1</td>
          <td>row 2 - column 2</td>
          <td>row 2 - column 3</td>
          <td>row 2 - column 4</td>
          <td>row 2 - column 5</td>
          <td>row 2 - column 6</td>
          <td>row 2 - column 7</td>
          <td>row 2 - column 8</td>
          <td>row 2 - column 9</td>
          <td>row 2 - column 10</td>
        </tr>
      </tbody>
    </table>

</body>

</html>

结果：表格1占满整个容器，但表格2超出容器范围。

情况2：表格设置display: block #

table {
  display: block;
  width: 100%;
  overflow: auto;
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  white-space: nowrap
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Overflow Example</title>
</head>

<body>

  <p>Table 1</p>
  <table>
    <tbody>
      <tr>
        <td>row 1 - column 1</td>
        <td>row 1 - column 2</td>
      </tr>
      <tr>
        <td>row 2 - column 1</td>
        <td>row 2 - column 2</td>
      </tr>
    </tbody>
  </table>

  <p>Table 2</p>
    <table>
      <tbody>
        <tr>
          <td>row 1 - column 1</td>
          <td>row 1 - column 2</td>
          <td>row 1 - column 3</td>
          <td>row 1 - column 4</td>
          <td>row 1 - column 5</td>
          <td>row 1 - column 6</td>
          <td>row 1 - column 7</td>
          <td>row 1 - column 8</td>
          <td>row 1 - column 9</td>
          <td>row 1 - column 10</td>
        </tr>
        <tr>
          <td>row 2 - column 1</td>
          <td>row 2 - column 2</td>
          <td>row 2 - column 3</td>
          <td>row 2 - column 4</td>
          <td>row 2 - column 5</td>
          <td>row 2 - column 6</td>
          <td>row 2 - column 7</td>
          <td>row 2 - column 8</td>
          <td>row 2 - column 9</td>
          <td>row 2 - column 10</td>
        </tr>
      </tbody>
    </table>

</body>

</html>

结果：表格2显示水平滚动条，但表格1被压缩至最小宽度。

已知overflow仅对display: block元素生效，但该显示方式会导致width="100%"无法正常工作。如何实现表格1始终占满容器、表格2始终显示水平滚动条的效果？

解决方案：给表格包裹容器元素 #

核心思路是把overflow: auto和width: 100%移到表格的外层容器上，表格本身保持默认的display: table并设置width: 100%，这样既能让小表格占满容器宽度，又能让大表格超出时触发容器的滚动条。

完整代码示例 #

.table-container {
  width: 100%;
  overflow: auto;
}
table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Overflow Solution</title>
</head>
<body>
  <p>Table 1</p>
  <div class="table-container">
    <table>
      <tbody>
        <tr>
          <td>row 1 - column 1</td>
          <td>row 1 - column 2</td>
        </tr>
        <tr>
          <td>row 2 - column 1</td>
          <td>row 2 - column 2</td>
        </tr>
      </tbody>
    </table>
  </div>

  <p>Table 2</p>
  <div class="table-container">
    <table>
      <tbody>
        <tr>
          <td>row 1 - column 1</td>
          <td>row 1 - column 2</td>
          <td>row 1 - column 3</td>
          <td>row 1 - column 4</td>
          <td>row 1 - column 5</td>
          <td>row 1 - column 6</td>
          <td>row 1 - column 7</td>
          <td>row 1 - column 8</td>
          <td>row 1 - column 9</td>
          <td>row 1 - column 10</td>
        </tr>
        <tr>
          <td>row 2 - column 1</td>
          <td>row 2 - column 2</td>
          <td>row 2 - column 3</td>
          <td>row 2 - column 4</td>
          <td>row 2 - column 5</td>
          <td>row 2 - column 6</td>
          <td>row 2 - column 7</td>
          <td>row 2 - column 8</td>
          <td>row 2 - column 9</td>
          <td>row 2 - column 10</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

原理说明 #

• 外层容器table-container设置width:100%确保它占满父容器宽度，overflow:auto在内部表格超出容器宽度时显示滚动条。
• 表格保持display:table，此时width:100%会让表格尽可能占满容器宽度；当表格内容宽度超过容器时，表格会自然撑开，触发容器的滚动条，同时不会压缩小表格的宽度。

内容的提问来源于stack exchange，提问作者Khiêm Trần Đăng