Удерживать ширину ячейки таблицы, если внутри переполнения div

Question

См. Код внизу сообщения. Внутри div находится таблица. Когда переменная $size мала, например 2 или 3, и все ячейки могут легко помещаться внутри div, ширина ячеек <th> контролируется правильно, чтобы иметь ширину 100 пикселей. Если вы измените переменную $size: $size = 20, вы увидите, что ячейки <th> сжимаются, чтобы поместиться в div, хотя у него есть свойство overflow:auto. Я вижу то же самое для overflow:scroll.

Что бы я хотел видеть, ширина ячейки таблицы остается постоянной на 100 пикселей, а 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.