テーブルレイアウトと重なっているテーブルの列が固定されています

Question

テーブルの 'table-layout：fixed' CSSプロパティが設定されているときに、テーブルの列が重複しているという問題があります。

左側の列は応答性があり、最小幅が設定されています。右の列は幅が固定され、右に浮かびます。ブラウザのサイズが変更されると、右側の列は左の列と重なり始め、その最小幅は無視されます。

私は 'テーブルレイアウト：固定'を取り除くと（デフォルトでautoになる）、これは起こりません。しかし、IE7のような古いブラウザではIE8以上のブラウザとは異なり、ページがうまくレンダリングされないため、これは望ましくありません。

問題を示すために基本的な例を設定しました。下のリンクを見てください。

http://jsfiddle.net/hGzQu/

任意の洞察力が大幅に高く評価されています。

Answer 1

使用floatとmin-widthとの合併症を回避するためにtable-layout:fixedとともにcol要素：

<table> 
    <colgroup> 
    <col width="0*"><!--min-width equivalent--> 
    <col width="30"><!--fixed width column--> 
    </colgroup> 
    <tr> 
    <td>foo</td> 
    <td>bar</td> 
    </tr> 
</table>