テーブルの列は、CSSで最小幅と最大幅の両方を設定します

Question

列内に伸びる可能性のあるテーブルを持っていますが、CSSの最小幅と最大幅に少し問題があります。 /最大幅は動作するはず

• 分：Prevent text from overlap table td width
• 最小/最大幅はサポートしていません。Min-width and max-height for table attributes

私は希望

はまた、それがどのようにこの作品の周りにいくつかの矛盾する答えをtheresのようです次のようなものがあります。

table{ 
    width:100%; 
} 
.a, .b, .c 
{ 
    background-color: red; 
} 
.a 
{ 
    min-width: 10px; 
    max-width: 20px; 
} 
.b 
{ 
    min-width: 40px; 
    max-width: 45px; 
} 
.c 
{ 
} 

<table> 
    <tr> 
     <td class="a">A</td> 
     <td class="b">B</td> 
     <td class="c">C</td> 
    </tr> 
</table> 

javacriptなしでこれを達成する方法はありますか（つまり、テーブルで列の拘束が制限されています）？ http://jsfiddle.net/4b3RZ/10/

私は列にのみ分の幅を設定した場合、私は比例ストレッチ取得：http://jsfiddle.net/4b3RZ/8/

を、私は唯一のものは拡大しないとCSS3 + HTML5

でjsfiddleを動作するようにこれが必要

• 以下

  、実際にいくつかの異なるCSSセットアップのためにレンダリングされるもののテーブルです：

  

Answer 1

テーブルの動作は異なります。ときには直感的に反する。

解決策はmax-widthの代わりに表のセルにwidthを使用することです。

このような場合でも、セルは指定された幅以下に収縮しませんが、実際にはそのようになります。
cに制限はありません。テーブルに70pxの幅を指定すると、a、b、cの幅はそれぞれ16,42、および12ピクセルになります。
テーブルの幅が400ピクセルの場合、上のグリッドで予想通りに動作します。
テーブルのサイズを小さすぎる（a.min + b.min + Cの内容より小さくする）場合にのみ失敗します。テーブル自体が指定よりも広い場合。

あなたのフィドルに基づいてスニペットを作成しました。このスニペットでは、すべての枠線とパディングと枠線を削除していますので、より正確に幅を測定できます。

table { 
 
    width: 70px; 
 
} 
 

 
table, tbody, tr, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    border-spacing: 0; 
 
} 
 

 
.a, .c { 
 
    background-color: red; 
 
} 
 

 
.b { 
 
    background-color: #F77; 
 
} 
 

 
.a { 
 
    min-width: 10px; 
 
    width: 20px; 
 
    max-width: 20px; 
 
} 
 

 
.b { 
 
    min-width: 40px; 
 
    width: 45px; 
 
    max-width: 45px; 
 
} 
 

 
.c {}

<table> 
 
    <tr> 
 
    <td class="a">A</td> 
 
    <td class="b">B</td> 
 
    <td class="c">C</td> 
 
    </tr> 
 
</table>