0

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

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;
}

这是我在 jsFiddle 上尝试过的。有没有办法结合两全其美？

4

2 回答 2

1

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

于 2012-06-22T10:28:01.523 回答
0

如果我理解你的话：

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

于 2012-06-22T10:28:51.557 回答