2

多くの表形式のデータを表示する Web ページがあり、これらの各表を 1 つの水平線に配置する必要があります。以下の例をモックアップしました。

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

4000px などの大きな幅に設定しない限り、内側の div がテーブルの div をラップするという問題があります。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 に答える
-2

なぜあなたは大量の div 内に大量のテーブルを持っているのですか?!? これは、表形式のデータにテーブルを使用する目的を無効にします...表形式のデータを使用しているときは、テーブルを使用する必要があります...無駄な組み合わせを適用しないでください。

単純に 1 つのテーブルを使用<td>stuff</td>し、追加するデータが増えるたびに使用します...とにかく td は水平ベースであるため、css を拡張する必要さえありません。

于 2009-06-06T00:54:23.310 に答える