2

我有一个显示大量表格数据的网页，这些表格中的每一个都需要放在一条水平线上。我在下面模拟了一个例子：

<html>
<style>
  .outer{width:300px;height:300px;overflow: scroll;}
  .inner{white-space: nowrap;}
  .inline{float: left;}
</style>
<body>
<div class="outer">
    <div class="inner">
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
    </div>
</div>
</body>
</html>

我遇到了内部 div 包裹表格 div 的问题，除非我将其设置为具有较大的宽度，例如 4000px。有没有一种很好的方法来保持所有表内联，即使它们超过了仅使用 css 的外部 div 的大小？

4

4 回答 4

2

我们这个属性：

white-space:nowrap;
于 2009-03-20T17:07:24.017 回答
2

更改.inline{float: left;}为.inline{display:inline-block;}

http://jsfiddle.net/QLe5r/

于 2012-03-23T19:17:21.717 回答
0

这是因为 float: left 在 div“内联”上。而是使用 display: inline-block，（和 display: inline for IE，我认为。检查）。

于 2011-02-23T16:26:22.277 回答
-2

为什么在地球上你在大量的 div 中有大量的表格？！？这违背了将表格用于表格数据的目的......当您处理表格数据时，您应该只使用表格......而不是应用无用的组合。

只需使用一个表并<td>stuff</td>在每次有更多数据要添加时使用......无论如何，td 都是基于水平的，因此您甚至不必费心使用 css 来扩展它。

于 2009-06-06T00:54:23.310 回答