html - 如何创建一个宽度为 100% 但具有动态列布局的表格？

Question

我想创建一个完全包含在其父元素中但列宽根据其内容解析的表格。如果表格要求的长度比父元素的内容框长，则表格下方应出现水平滚动条。我尝试摆弄 table-layout 和 overflow 属性，但没有成功。

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 上尝试过的。无论如何，有没有办法结合两全其美？

Answer 1

试试 overflow-x:auto;。这仅适用于元素的水平轴。