如何創建寬度爲100％但具有動態列布局的表格？

我想創建一個完全包含在其父元素中的表，但是具有根據其內容解析的列寬。如果表格的所需長度比父元素的內容框長，則在表格下方會出現一個水平滾動條。我試圖擺弄table-layout和overflow屬性，但沒有成功。如何創建寬度爲100％但具有動態列布局的表格？

HTML代碼：

<div> 
<table> 
    <tr> 
     <td>fixed_length_text</td> 
     <td>variable_length_text</td> 
     <td>image</td> 
     <td>double_float_double_float</td> 
    </tr> 
    <tr> 
     <td>fixed_length_text</td> 
     <td>variable_length_text_variable_length_text</td> 
     <td>image</td> 
     <td>double_float_double_float</td> 
    </tr> 
</table> 
</div>

CSS代碼：

div { 
    padding: 10px; 
    background: grey; 
    width: 400px; 
} 

table { 
    border-collapse: separate; 
    border-spacing: 2px; 
    background: white; 
} 

tr { 
    background: green; 
}

This是我試過的jsfiddle。無論如何要結合兩全其美？

來源

2012-06-22 Question Overflow