html - TD セルに基づいて TABLE の幅を変更します

Question

TD の幅を指定してテーブルの幅を指定する方法を探しています。

次のシナリオ ( jsfiddle で試してみてください) では、各 TD の幅を100pxに指定しており、 300pxのテーブル (および div の水平スクロールバー)を取得することを期待していましたが、実際にはブラウザーはそれらに 63px の幅を与えていることがわかります。 (テーブルの幅を 3 で割った値)

TD がテーブルの幅を決定し、逆にしないようにする方法はありますか? これまでのところ、TD と TABLE の table-layout、display、overflow のさまざまな値を試しましたが、成功しませんでした。

html:

<div>
    200px
    <table>
        <tr>
            <td>100px</td>
            <td>100px</td>
            <td>100px</td>
        </tr>
    </table>
</div>

最小限の CSS:

div {
    width: 200px; 
    height: 300px; 
    border: solid 1px red; 

    overflow-x: scroll;
}

td {
    width:100px; 
    border: solid 1px #000;
}

table { 
    border-collapse: collapse;
}

Answer 1

A simple solution is make the td's content be 100px wide.

<div>
    200px
    <table>
        <tr>
            <td><div class="content">100px</div></td>
            <td><div class="content">100px</div></td>
            <td><div class="content">100px</div></td>
        </tr>
    </table>
</div>

.content {
    width: 100px;
}

Answer 2

最も簡単な解決策は、TD min-widthの代わりに設定することです。width