2016-10-20 13 views
2

)スクロールバーと動的な幅を持つ柔軟なレイアウトを作成したいと考えています。CSSオーバーフロースクロールテーブルセル(幅:autoまたはwidth:100%

テーブルの幅、高さはウィンドウの100%、自動幅(幅はコンテンツの内容によって異なります)と2(3)列、残りの幅は中央の列があります。私は列の正確な幅を指定することはできません。

私のコンテンツがセルの幅と高さよりも大きければ、水平と垂直のスクロールバーが必要です。

例1 Example 2

例ここでは2LiveDemo

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

である私が使用することはできません。

  1. table-layout:fixed - 列の幅がそれに依存しているためです -
  2. white-space:wrap内容がテキストである場合にのみ動作し、そこに働いていない

    1. width:100%, max-width:100%, min-width:100%width,heightとコンテンツ
    2. overflow:scrollは私が試した、純粋なCSSのソリューション

    が必要

  3. を指定しました垂直スクロールバーのみです

質問がある:それは<TD style="overflow:auto"></TD>だったと幅が自動であればoverflow:scrollまたはoverflow:autoはそれのwidth,heightを持っているとdivの作り方の親コンテナは

p.s BESTケースだろう(私の場合はそれがTDがあります)。

+1

のですか?また、どのように2つの列を持つことができますが、それらの1つは100%です。この表データもありますか?そうでない場合、私はdisplay:flexとdivsを使いたいと思っています。 – Pete

+0

例を実行すると、テーブルの列に自動幅があるかどうかがわかります。幅はコンテンツの幅から計算されます。最初の列の最初の列は2番目の列の幅はテーブルの合計幅の残りの部分です –

+0

例を実行してその200pxを離して、最初の列が拡大するのではなく縮小することがわかります。 %が他の列にあるのは、それがイメージであるか、または白い空白がある場合です。 – Pete

答えて

関連する問題