Question

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

<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的大小？

Answer 1

我们这个属性：

white-space:nowrap;

Answer 2

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

http://jsfiddle.net/QLe5r/

Answer 3

这是因为浮点数：在div上“内联”。而是使用display：inline-block，（并显示：IE的内联，我认为。检查）。

Answer 4

为什么在EARTH上你有大量的桌子里面有大量的桌子？！？这就违背了将表格用于表格数据的目的......当你在制作表格数据时，你应该只使用表格...而不是应用无用的组合。

每次添加更多数据时，只需使用一个表并使用<td>stuff</td> ... td是水平的，所以你甚至不必费心去css来扩展它。

css div溢出和动态水平大小

4 个答案: