css divのオーバーフローとダイナミックな水平サイズ

私は多くの表形式のデータを表示するWebページを持っており、これらの各テーブルは1つの水平線に配置する必要があります。私は4000PXのような大きな幅を持つようにそれを設定しない限り、内側のdivは、テーブルのdivをラップcss divのオーバーフローとダイナミックな水平サイズ

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

私が午前問題：私は、以下の例を嘲笑しています。 cssだけで外側のdivのサイズを超えていても、すべてのテーブルをインラインに保つ良い方法はありますか？

出典

2009-03-20 bobwah

.inline{display:inline-block;}にあなたはここに多くの例を与える必要があるとしています。あなたが話している内部部門は何ですか？「アイテム」とは何ですか？ – Welbog

私はこれをもっと明確にしようとしました。 – bobwah

"stuff"が例外的に長い、または常にラップしているときだけですか？ –

変更.inline{float: left;}

http://jsfiddle.net/QLe5r/

出典

2012-03-23 19:17:21

会社は、このプロパティ：

white-space:nowrap;

出典

2009-03-20 17:07:24

私はこれを試しましたが、彼らはまだラップします。テーブルを含むdivのすべてをインラインにしたのかどうかは分かりませんが、これですばやく行って、役立つかどうかを確認します。 – bobwah

いくつかのコードを投稿しますか？「ホワイトスペース：ラップラップ」は私のために働く。 – bobince

解決策がありません – Andy

-2

はなぜ地球上であなたはdiv要素のトン内部テーブルのトンを持っているのですか？！？これは、表データの表を使用する目的を打ち消します。表データを使用するときには、表を使用するだけです...無用な組み合わせは適用しないでください。

追加するデータが増えるたびに、テーブルを1つだけ使用して、<td>stuff</td>を使用するだけです.tdは水平ベースなので、CSSを拡張しても気にする必要はありません。

出典

2009-06-06 00:54:23

私はサーバーラックを作成し、サーバーの行全体を表示していました。これらはすべてdivデータであるべきだと思いますが、テーブルを使って簡単に元のもの（一度に1つずつ）を作成しました。 – bobwah

これは、float：divの "inline"に残っているためです。代わりにdisplay：inline-blockを使います（そして、IEの場合はインラインで表示します）。

出典

2011-02-23 16:26:22 Javanight

はfirefoxでは動作しますが、ieではそうではありません。これはie6のためのものでした.2年前ですが、これ以上心配する必要はありません。 – bobwah

css divのオーバーフローとダイナミックな水平サイズ

答えて

関連する問題