Question

我有一张有内表的桌子。我不想设置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>

您可以看到内部表格有两个td，总宽度为4000，比浏览器宽。

但是在浏览器中，表会自动缩小以适应浏览器。如何让表格以实际宽度显示（此处为200 + 2000 + 2000）。

如果我将表格的宽度设置为：

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

它将按照我的预期显示，但我不想。由于内表的列是动态的，因此在运行之前我没有得到总宽度。

Answer 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>

如何让表格的宽度取决于td的宽度？

1 个答案: