テーブルセルの幅をその内容に合わせるにはどうすればいいですか？

Question

私はテーブルが100％の幅を持っているが、それから1つの列のみが自由に幅を持たなければならない、のようにしたい：そうAとB列の幅は、その内容の幅と一致している必要があり

| A | B | C                 | 

が、テーブルが終了するまでCの幅を上げる必要があります。

私はAとBの幅をピクセル単位で指定できますが、問題は、これらの列の内容の幅が固定されていないことです。固定幅を設定すると内容が完全に一致しません：

PS：私は実際のテーブルアイテムを使用していませんが、divリストにはDLテーブルがあります：display：table、dlにはdisplay：table-row、dt/dd display：table-cell （表示して私の知る限りテーブルとdivタグ：テーブルはほとんど同じに振る舞う）私はあなたを理解している場合、あなたは表形式のデータを持っていますが、div要素を使用してブラウザにそれを提示したい...

Answer 1

。

（ここで働いjsfiddleです：http://jsfiddle.net/roimergarcia/CWKRA/）は

マークアップ：

<div class='theTable'> 
    <div class='theRow'> 
     <div class='theCell' >first</div> 
     <div class='theCell' >test</div> 
     <div class='theCell bigCell'>this is long</div> 
    </div> 
    <div class='theRow'> 
     <div class='theCell'>2nd</div> 
     <div class='theCell'>more test</div> 
     <div class='theCell'>it is still long</div> 
    </div> 
</div>​ 

とCSS：

.theTable{ 
    display:table; 
    width:95%; /* or whatever width for your table*/ 
} 
.theRow{display:table-row} 
.theCell{ 
    display:table-cell; 
    padding: 0px 2px; /* just some padding, if needed*/ 
    white-space: pre; /* this will avoid line breaks*/ 
} 
.bigCell{ 
    width:100%; /* this will shrink other cells */ 
}​ 

悲しい部分は、私はこの1年間行うことができなかったです前に、私が本当にそれを必要としたときに - _-！