0

内部テーブルを持つテーブルがあります。の幅を設定したくありませんtableが、tdの幅:

<table border="1">
    <tr>
        <td width="200">left menus (200px)</td>
        <td>
            <table border="1" class="table-fixed" style="background-color:#ddd" >
                <tr>
                    <td width="2000">2000px</td>
                    <td width="2000">2000px</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

内側のテーブルには が 2 つtdあり、全体の幅は4000で、ブラウザよりも広いことがわかります。

ただし、ブラウザーでは、ブラウザーに合わせてテーブルが自動的に縮小されます。テーブルを実際の幅 (ここでは 200+2000+2000) で表示する方法。

テーブルの幅を次のように設定した場合:

<table width="4200">
    ...
            <table width="4000">
    ...
</table>

期待どおりに表示されますが、表示したくありません。内部テーブルの列は動的であるため、実行前に合計幅を取得しません。

4

1 に答える 1

1

CSS min-width を使用して強制できます。

http://jsfiddle.net/kM6DQ/

<table border="1">
    <tr>
        <td width="200">left menus (200px)</td>
        <td>
            <table border="1" class="table-fixed" style="background-color:#ddd" >
                <tr>
                    <td class="wide">2000px</td>
                    <td class="wide">2000px</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<style>
td.wide { width:2000px; min-width:2000px; }

</style>
于 2012-12-23T07:24:59.623 に答える