您不能仅通过更改表的display来实现这一点，但有几种方法可以实现这一点。

1.添加“滚动”容器div

您可以在容器div中向上放置标准表，并给予 it 指定overflow: auto;，这样它就有了滚动条。

table          { width: 100%; }
.scrollwrapper { overflow: auto; }

这意味着即使表格本身不够宽，它也会拉伸到至少100%的宽度，如果内容使其宽度超过100%，则div会得到一个滚动条。

工作示例：

x一个一个一个一个x一个一个二个x

2.带显示器的表格：块

这并不符合您的要求，但让我们看看为什么...
当你给table的display:block属性赋值时，如果表格的宽度超过了可用空间，那么它会给表格添加滚动条，但是正如你所注意到的，如果表格的宽度没有达到可用空间的宽度，那么width:100%不会让列拉伸到足够的宽度：

工作示例显示：表格上的块

一个三个三个一个
正如我们在上面的例子中所看到的，表格实际上被拉伸到了100%，然而这是因为表格行和单元格没有填满表格。这是我发现tbody黑客攻击的时候...

3.带显示的表格：块和tbody“hack”

请注意，这是一个非常黑客，我不知道如何以及支持它可能！

在处理这个问题时，我意识到问题是行和单元格没有作为正常的行和单元格，因为它们不在具有display:table的父对象中。
这时我发现，当我将display:table添加到tbody时，它为行和单元格提供了一个具有正确显示类型的父对象，并且它工作了！

table       { display: block; overflow: auto; }
table tbody { display: table; width: 100%; }

即使tbody没有显式地添加到html中，它似乎也能工作。
tbody hack的工作示例

table {
  border: 1px solid blue;
  overflow: auto;
  display: block;
}

table tbody {
  display: table;
  width: 100%;
}

td {
  border: 1px solid #aaa;
}

<h3>Tbody "Hack" - Wide Table</h3>

<table>
  <tr>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
  </tr>
</table>

<h3>Tbody "Hack" - Narrow Table</h3>

<table class="tbody-hack">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td>Short text</td>
  </tr>
</table>

如果表的宽度大于<div>的宽度，则会弹出溢出

<div id="table" style="width:200px">

  <table style="width:100%; overflow:auto;display:block">
    <tr>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>header</th>
    </tr>

    <tr>
      <td>body</td>
      <td>body</td>
      <td>body</td>
      <td>body</td>
      <td>body</td>
      <td>body</td>
    </tr>

  </table>

</div>

使用CSS网格。

.table-wrapper {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  overflow: auto;
  white-space: nowrap;
}

<div class="table-wrapper">
<table>
  <thead>
    <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
    </tr>
  </tbody>
</table>
</div>