2
)スクロールバーと動的な幅を持つ柔軟なレイアウトを作成したいと考えています。CSSオーバーフロースクロールテーブルセル(幅:autoまたはwidth:100%
テーブルの幅、高さはウィンドウの100%、自動幅(幅はコンテンツの内容によって異なります)と2(3)列、残りの幅は中央の列があります。私は列の正確な幅を指定することはできません。
私のコンテンツがセルの幅と高さよりも大きければ、水平と垂直のスクロールバーが必要です。
例ここでは2 がLiveDemo
<div style="width:1024px">
<table style="width:100%">
<tr>
<td>
<div>Column Menu with Dynamic Content and width</div>
</td>
<td style="width:100%;">
<div style="overflow:scroll;">Column Big Dynamic Content with ScrollBars</div>
</td>
</tr>
</table>
</div>
である私が使用することはできません。
table-layout:fixed
- 列の幅がそれに依存しているためです -white-space:wrap
内容がテキストである場合にのみ動作し、そこに働いていないwidth:100%, max-width:100%, min-width:100%
:width,height
とコンテンツoverflow:scroll
は私が試した、純粋なCSSのソリューション
が必要
- を指定しました垂直スクロールバーのみです
質問がある:それは<TD style="overflow:auto"></TD>
だったと幅が自動であればoverflow:scroll
またはoverflow:auto
はそれのwidth,height
を持っているとdiv
の作り方の親コンテナは
p.s BESTケースだろう(私の場合はそれがTD
があります)。
のですか?また、どのように2つの列を持つことができますが、それらの1つは100%です。この表データもありますか?そうでない場合、私はdisplay:flexとdivsを使いたいと思っています。 – Pete
例を実行すると、テーブルの列に自動幅があるかどうかがわかります。幅はコンテンツの幅から計算されます。最初の列の最初の列は2番目の列の幅はテーブルの合計幅の残りの部分です –
例を実行してその200pxを離して、最初の列が拡大するのではなく縮小することがわかります。 %が他の列にあるのは、それがイメージであるか、または白い空白がある場合です。 – Pete