0

親要素内に完全に含まれているが、その内容に基づいて解決される列幅を持つテーブルを作成したいと思います。テーブルの必要な長さが親要素のコンテンツボックスよりも長い場合は、テーブルの下に水平スクロールバーが表示されます。table-layoutandプロパティをいじってみました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;
}

これは私が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 に答える