在溢出 div 内保持表格单元格宽度固定

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.