Question

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

HTML code：

<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;。这仅适用于元素的水平轴。

Answer 2

如果我理解你的话：

http://jsfiddle.net/nfg34/1/

如何创建宽度为100％但具有动态列布局的表格？

2 个答案: