2011-06-21 17 views
12

テーブルがあり、min-widthmax-heightのプロパティを定義したいとします。以下の例を参照してください。テーブル属性の最小幅と最大高さ

私の問題は、ブラウザがそれを受けないということです。私がtdに定義した場合、それはtd要素内のdiv要素で定義すると、内容は右と最高の幅を持ちますが、テーブルのサイズは同じです。 (空きスペースが多いので/)

どうすれば解決できますか?

編集: テーブルがフルスクリーンモードの場合にのみ問題が発生しているように見えた。それにもかかわらず、エレメントは最大幅を超えてはいけません!

例:「幅」プロパティが「最小幅」と「最大幅」として、使用されるべきである

<html> 
<head> 
    <style type="text/css"> 
     td { 
      border: 1px solid black; 
     } 

     html,body,.fullheight { 
      height: 100%; 
      width: 100%; 
     } 
     .minfield { 
      max-width: 10px; 
      border: 1px solid red; 
      overflow: hidden; 
     } 
    </style>  
</head> 

<body> 
    <table class="fullheight"> 
     <tr> 
      <td class="minfield"> 
       <div class="minfield"> 
        <p>hallo</p> 
       </div> 
      </td> 
      <td><p>welt</p></td> 
     </tr> 
    </table> 
</body> 
</html> 

答えて

25

表のセルの場合は、表のセルのために定義されていません。 specification

"CSS 2.1では、表、インライン表、表のセル、表の列、および列のグループに対する '最小幅'と '最大幅'の効果は定義されていません。

幅を適用するには、table-layoutプロパティを「fixed」に変更してみます。この仕様はアルゴリズムをはっきりと記述しています。

+0

おかげで:/私は推測する...単純な作業が、CSSでは不可能:(、多分誰かが解決策:) – Stefan

+0

なぜあなたはそれをCSSでは不可能だと思いますがポストス?あなたのコードで 'min-width'を 'width'に変更すると、最初の列は非常に薄く、2列目は広いです。あなたの場合は何ができませんか? 'width'は 'td'に適用され、 'max-width'は 'div'で完全に正しいことに注意してください。 – Arsen7

+0

うーん、divs work :)、しかし私が望む通りではありません:( – Stefan

-1

テーブルとセルの最小幅の設定に問題はありません。これを参照してくださいjsFiddle

HTML:

<table style="border:solid 1px #000;"> 
    <tr> 
     <td id="cell-one" style="border:solid 1px #000;"> 
      test 1 
     </td> 
     <td style="border:solid 1px #000;"> 
      test 2 
     </td> 
    </tr> 
</table> 

とCSS:

table{width: 90%;} 
td#cell-one{min-width: 20%;} 

が最小幅は、幅(または最大幅)に依存している、覚えておいてください。 max-widthはwidthをオーバーライドし、min-widthはwidthまたはmax-widthをオーバーライドします。 jsFiddle

+0

これは何もしません。あなたの例のセル幅は常に50分の50です。これは 'min-width'と' max-width'が仕様に従ってテーブルセルに影響を与えないためです。 – Slight

4

あなたもTDに不可視画像を置くことができるTD分間-height属性を強制的に、またはラップ:他の言葉では、あなたが最小幅を適用する要素の親の幅プロパティを設定してくださいあなたはdivに出会った。最初のケースのための 例:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td> 
+3

どうして... ...フィドル:http://jsfiddle.net/LpLDq/ – Stefan

+0

可変幅テーブルのセルを最小幅の値に合わせるために、これが私にとっては唯一のことでした。これは本当にありがとう。 – JosephK

関連する問題