テーブルセルはできるだけ長く、最大幅より小さいのはどうですか？

Question

私は動的なテーブルを持っています。そして、各行の最初のセルの幅をそのコンテンツのサイズに応じて作りたいと思います。 今のところ、セルのテキストはデータに応じてランダムに分割されます。

私が望むのは、セルが実際に破損するような最大幅までセルを長くすることです。

たとえば、最大幅が200ピクセルの場合： カラムの最大セルが100ピクセルの場合、カラムは100ピクセルになります。 30pxの場合、列は30pxになります。 しかし、300pxの場合、列は200pxになり、300pmを超えるセルは改行されます。

min-widthとmax-widthを設定しようとしましたが、コンテンツの最小幅があり、必要に応じて200pxまで拡張されません。

Answer 1

ラップmax-widthを持つ要素内のセルの内容：であるため（spec）

.cell { 
 
    display: table-cell; 
 
    border: 1px solid; 
 
} 
 
.contents { 
 
    max-width: 200px; 
 
}

<div class="cell"> 
 
    <div class="contents"> 
 
    Lorem ipsum. 
 
    </div> 
 
</div> 
 
<br /> 
 
<div class="cell"> 
 
    <div class="contents"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula lorem, efficitur sit amet massa consectetur, gravida venenatis dui. 
 
    </div> 
 
</div>

良いが、細胞に直接max-widthを設定していませんCSS 2.1では、min-widthとmax-widthのテーブルへの影響は インラインテーブル、テーブルセル、テーブル列、および列グループは、 未定義です。