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

问题描述

我的网页上的表格设置为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>

标签： htmlcss

解决方案

你不能通过display单独改变桌子来做到这一点，但有几种方法可以实现这一点。

1.添加一个“滚动”容器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.带显示的表格：块

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

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

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

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黑客的时候...

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

请注意，这在很大程度上是一种 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;
}