Html 如何创建具有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>

---

这是我在JSFIDLE上尝试过的。有没有办法将这两个世界的优点结合起来？

试试

overflow-x:auto。这仅适用于元素的水平轴。
如果我理解正确，则：

您已链接到与问题中相同的JSFIDLE。
div {
    padding: 10px;
    background: grey;
    width: 400px;
}

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

tr {
    background: green;
}