0

プロジェクト用にある種のグリッドを作成しています。グリッドには特別な要件が 1 つあります (これが、社内でグリッドを作成しようとしている理由です)。中央の列はスクロール可能でなければなりません。

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

私の質問に到達するには: サーバー (asp.net 2.0) からのデータを使用してコントロールをレンダリングするとき、または JavaScript を介して行が追加され、ユーザーが選択されたときに、ユーザーデータを含む左の列には動的な幅が必要です。 leftcontainer に列を残して、必要に応じて自動的に水平方向にサイズ変更し、追加のスクロールバーが topcontainer に表示されるようにします (div の垂直方向の分割を避けるため)。最大幅の 2 番目の topcontainer div とオーバーフローのある topcontainer div -x: scroll, + a width: auto 私の列ではうまくいったはずですが、うまくいかないようです。

誰かが私を正しい軌道に乗せることができますか? 私の説明が理解できることを願っています。とにかく、写真を追加しました[写真] [1]基本的に、左の列をコンテンツの幅に合わせ、水平方向に同じレベルに固定する必要があります。

どうも。

4

1 に答える 1

1

私はテーブルレス 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-15T23:26:09.617 に答える