在溢出区域内保持表格宽度固定

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。