如何讓表的寬度取決於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>