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

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

1 个答案: