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

【问题标题】：How to let width of a table depend on the td's width?如何让表格的宽度取决于 td 的宽度？
【发布时间】：2012-12-10 04:00:32
【问题描述】：

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

可以看到内表有两个tds，总宽度为4000，比浏览器还宽。

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

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

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

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

【问题讨论】：

标签： html html-table width

【解决方案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>

【讨论】：