html - 表格比它的祖 parent 更宽，并且没有显示滚动条

Question

如果表格超出屏幕范围，我想滚动表格。该表包裹在许多其他标签中。我的问题是我的表格似乎不知道有多少空间，因此无法显示整个表格。

我已尝试在 fiddle 演示中尽可能多地剥离代码。 http://jsfiddle.net/wwgtcLx5/这里我的表显示在窗口外，尽管我在表上设置了 overflow:hidden 和 overflow:scroll 包装 div。

这是我希望它的工作方式: http://jsfiddle.net/dv0tfvst/8/

为了让它起作用，我在我的表格之前的标签上添加了 style="display:block;"。否则我的表格标签似乎不知道有多少空间。这不是一个好的解决方案，所以我希望有人能帮助我。谢谢!

Answer 1

你可以把overflow-x: scroll;在 <td> 上拿着 table 。

尝试将其放入您的 CSS 中:

#width_ok{
    overflow-x: scroll;
}

我想这就是你想要的。 http://jsfiddle.net/wwgtcLx5/1/

我认为您遇到的问题是 div 汤。我不知道为什么一个元素周围有 6 个单独的 div。也许您需要它们来做其他事情，在这种情况下，我建议修改您的示例以包含您缺少的元素(只需复制和粘贴已经存在的内容就可以用于演示目的)。如果你用 1 个 div 替换它们并给它 width: 100%; scroll-x: auto;有用。我也给了padding-bottom: 50px;复制你的间距。 http://jsfiddle.net/wwgtcLx5/2/