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

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>