表格宽度100%，带有溢出滚动。

Question

我的网页上的表格设置为width:100%。如果需要，这会将表格拉伸到页面的整个宽度，或者如果页面太窄，则导致表格内容换行。表格中的所有内容都保持在网格中。

不幸的是，如果表格中有长单词，会阻止td变窄，从而出现一些问题。当发生这种情况时，页面开始出现水平滚动条以适应表格，但页面上的其他元素（如段落）仍保持原始页面的宽度。

我尝试将表格设置为overflow:scroll，以防止网页变宽，仅限于表格，但这并没有解决问题。我甚至尝试了overflow:hidden，看看它是否能起作用，但我无法使其正常工作。

如果我将表格设置为display:block，则溢出将起作用，但我无法使表格行和表格数据单元格跨越整个表格并保持其表格外观。

是否可能始终使表格占据页面的100％宽度，并在表格超出此宽度时使用溢出滚动？

我在下面添加了一个例子。它的效果很好，除非页面变得非常窄，比如对于这个例子大约是150像素。表格单元格变得如此狭窄，以至于无法再换行。我希望表格溢出，但实际上整个页面都溢出了。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra. Fusce sit amet nisi sed ante semper porta non in velit. Aenean euismod finibus nibh id mollis. Duis finibus, urna eu gravida posuere, nisl tortor condimentum dui, sed suscipit ante lacus et augue. Vestibulum ut leo hendrerit, convallis lectus quis, mollis purus. Mauris vitae libero aliquam, porttitor nisi vitae, pellentesque odio. Mauris vestibulum lacinia sem. Aenean sit amet nulla ipsum. Mauris pellentesque dui feugiat odio feugiat, vel egestas eros pellentesque. Cras porttitor metus eu porttitor lacinia.</p>
<table style="width:100%;overflow:scroll;background:#555">
<tr><td>column one</td><td>column two</td><td>column three</td></tr>
</table>

- GFL

---

请在minimal, reproducible example中提供你遇到问题的代码示例，这样我们就能够看到发生了什么，并且能够提供帮助。 - undefined

将带有省略号样式的元素放置在td中。 - undefined

也许你正在寻找word-break，或者white-space属性。 - undefined

你试过使用 overflow:auto 吗？ - undefined

@FluffyKitten的例子已添加。Elad，我并不是想截断任何文本，只是想让表格溢出。Itay和Hisham Bawa，不幸的是，这并没有解决问题。 - undefined

Answer 1

使用 CSS Grid。

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

- Saif Ur Rehman

Answer 2

你不能仅通过更改表格的 display 属性来实现此目标，但有几种方法可以实现。 1. 添加一个“滚动”容器 div 你可以将标准表格放在一个容器 div 中，并为该 div 添加 overflow: auto; 属性，这样它就会有滚动条。

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

这意味着表格将会拉伸至宽度至少为100%，即使它本身不够宽，如果内容使其变得比100%更宽，那么div将会出现滚动条。 工作示例：

table {
  width: 100%;
  border: 1px solid blue;
}

.scrollwrapper {
  overflow: auto;
}

td {
  border: 1px solid #aaa;
}

<h3>Scrolling Wrapper - Wide Table</h3>

<div class="scrollwrapper">
  <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>
</div>

<h3>Scrolling Wrapper - Narrow Table</h3>

<div class="scrollwrapper">
  <table>
    <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>

2. 使用display:block的表格

这并不是你想要的，但让我们看看为什么...

当你给表格添加 display:block 属性时，如果它们比可用空间更宽，它会将滚动条添加到表格中，这正是你想要的。然而，正如你所指出的，如果表格没有像可用空间一样宽，width:100% 就不能使列拉伸以填充宽度:

使用 display:block 的表格的工作示例

table {
  width: 100%;
  border: 1px solid red;
  overflow: auto;
  display: block;
}

td {
  border: 1px solid #aaa;
}

<h3>Display:Block - 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>Display:Block - Narrow Table</h3>

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

正如我们在上面的示例中所看到的，表格实际上已经被拉伸到100％，但是由于表格行和单元格未填充表格。这就是我发现 tbody hack 的时候...

3. 使用display:block和tbody“hack”的表格

请注意，这很大程度上是一种hack，我不知道它的支持情况如何！

在尝试过程中，我意识到问题是行和单元格不像正常的行和单元格一样工作，因为它们不在具有display:table属性的父级中。

这就是我发现当我将display:table添加到tbody中时，它为行和单元格提供了一个具有正确显示类型的父级，从而使其正常工作！

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

即使在html中没有明确添加tbody，它似乎仍然有效。

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>

- FluffyKitten

---

太完美了。非常感谢你。而且你的解释真的帮了很多。 - undefined

Answer 3

这样行吗？如果表格的宽度大于

的宽度，溢出将会出现。

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

- Hisham Bawa

---

不确定为什么display:block对你没有起作用。 - undefined

我不确定是谁给你点了踩，但不是我，尽管这个解决方案没有起作用。它很好地溢出了，但如果它比表格更宽，它不会扩展到父div的整个宽度，就像普通表格设置为width:100%一样。 - undefined

是的，固定宽度我可以想象这样会有效。我自己也不知道为什么它不起作用。 - undefined

可能与父级容器上的flex-grow属性有关吗？ - undefined