自動幅とオーバーフローdiv

私はプロジェクトのためのある種のグリッドを作成しています。グリッドには特別な要件が1つあります（つまり、社内で作成しようとする理由です）、中間の列はスクロール可能でなければなりません。自動幅とオーバーフローdiv

状況を描写する：これ以下のようにグリッドを作成しました：トップコンテナdivがあり、それには左の中と右のコンテナの3つのdivが含まれています。左のコンテナには、4つの列に分割されたユーザー情報が含まれています。中央のdivには、特定の従業員の時間を入力できるテキストボックスを持つx列（マネージャが選択した週に応じて）が含まれます。右側のdivには、合計と平均の列があります。

私の質問に：ユーザーデータを含む左の列は、サーバー（asp.net 2.0）からのデータでコントロールをレンダリングするとき、またはJavaScriptが経由して行が追加されたときに動的な幅を持つ必要があります。ユーザー左コンテナの列を左に移動して、必要に応じて自動的に水平にリサイズし、余分なスクロールバーがトップコンテナに表示されるようにします（divの垂直分解を避けるため） 2番目のトップコンテナdivは最大幅overflow-xを持つtopcontainer div：scroll、+幅：autoの列ではトリックが完了しているはずですが、動作していないようです。

誰でも私を正しい軌道に乗せることができますか？私の説明が理解できることを願っています。とにかく私は画像を追加しました[画像] 基本的には、左の列がコンテンツの幅に合わせて水平に同じレベルに固定されるようにします。

thx。

出典

2009-04-15 DavyR

多くの列のように聞こえる4 + x + some！それらのいくつかの行を言うことを意味しましたか？ – wheresrhys

トピックをオフにしていますが、私はどのウェブサイトでも自分のメールアドレスにつながるpicasawebアカウントを投稿しません。 – IEnumerator

いいえ、それは確かにすべての列です。すべての行にはいくつかのデータフィールド+最大78時間フィールド（= 1年半の週）が含まれています良い点はありますが、それは当社のネットワークから入手できる唯一のサービスでした。私は今晩それを変更します。 – DavyR

私はテーブルレスCSSデザインの賛辞ですが、必要なものがテーブルの場合はテーブルを使用してください。

ここに私があなたを始めたと思うコードがあります。

中間の列を画面の％に設定したかったが、スクロールしません。内部テーブルのサイズに展開されます。

私はあなたのコンテンツを表示するために3つの列のそれぞれに内部テーブルを追加する必要があります。

<html> 
<head> 
<style> 
table { 
    width: 100%; 
} 
.left { 
    background: red; 
    width: 100px; 
} 
.right { 
    background: blue; 
    width: 100px; 
} 
.middle { 
    background: green; 
    width: 800px; 
    display: block; 
    overflow: scroll; 
} 
.inner { 
    width: 2000px; 
    height: 100px; 
    background: black; 
    display: block; 
} 
</style> 
<body> 
<table> 
<tr><th class="left">Left</th><th class="middle">Middle Central block<table class="inner">Inner table</table></th><th class="right">Right</th></tr> 
</table> 
</body> 
</html>

出典

2009-04-15 23:26:09

Thx Jon、私はそれと一緒に遊んだが、私は、innableable行/セルを通常のテーブル行/セルと同じ高さに揃えるのに多くの問題があった。とにかく私は時間がなくなっているので、私は汚れたJavascriptの修正を使用しました。しかし、私はいくつかの空き時間があるときに私の現在のコードをリファクタリングすることを念頭に置いておくつもりです。 – DavyR

自動幅とオーバーフローdiv

答えて

関連する問題