表格宽度 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>

Answer 1

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

Answer 2

您无法通过display单独更改表格来做到这一点，但有几种方法可以实现此目的。

1.添加“滚动”容器div

您可以在容器 div 中向上添加标准表格并为其指定，这样overflow: auto;它将具有滚动条。

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

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

工作示例：

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

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

.scrollwrapper {
  overflow: auto;
}

td {
  border: 1px solid #aaa;
}

2. 带显示的表：块

这并没有达到你想要的效果，但让我们看看为什么......

当您提供表格display:block属性时，如果表格比可用空间宽，它会向表格添加滚动条，这正是您想要的。但是，正如您所指出的，如果桌子没有可用空间那么宽，width:100%则不会使列拉伸以填充宽度：

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

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

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

td {
  border: 1px solid #aaa;
}

正如我们在上面的示例中看到的，表格实际上拉伸到 100%，但是因为表格行和单元格没有填充表格。这是我发现tbody黑客的时候......

3. 带 Display:block 和 tbody“hack”的表格

请注意，这在很大程度上是一种黑客行为，我不知道它的支持程度如何！

在处理这个问题时，我意识到问题在于行和单元格不能像正常的行和单元格一样工作，因为它们不在父级中display:table.

就在那时，我发现当我添加display:table到 时tbody，它为行和单元格提供了具有正确显示类型的父级，并且它起作用了！

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

即使当tbody即使没有在 html 中明确添加，

tbody hack 的工作示例

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

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