在溢出區域內保持表格寬度固定

Question

請參閱帖子底部的代碼。 div內有一張桌子。當$size變量很小時（如2或3），並且所有單元格都可以很容易地放入div中時，<th>單元格的寬度可以正確控制爲寬度爲100px。如果您更改$size變量：$size = 20，您將看到表格<th>被壓縮以適應div，即使它具有overflow:auto屬性。我看到overflow:scroll也是這樣。

我想看到的是表格單元寬度保持不變在100px，並且div引入滾動條來滾動以查看所有單元格。即使$size == 1000，我不希望細胞的寬度縮小。

如何讓表保留width : 100px即使它比父div大？然後讓父div可以滾動。

<style type="text/CSS"> 

    .headrow { 
     border : 1px solid; 
     width : 100px; 
     height : 40px; 
    } 

table { 
    table-layout: fixed; 
} 

</style> 


<div id="b" style="border:1px solid;width:585px;height:60px;overflow:auto;"> 
    <table> 
     <tr> 
      <?php 
      $size = 20; 
       for ($i=0;$i<$size;$i++){ 
        echo '<th class="headrow"></th>'; 
       } 
      ?> 
     </tr> 
    </table> 
</div> 

Answer 1

更新你的CSS這樣的：

table { 
    table-layout: fixed; 
    width: 100%; 
} 

See it in action。