Question

我有一个包含可变数量列的表，我希望将其放在固定宽度的div中。

我希望表格列具有固定的宽度，并且如果表格太宽则表格会在div内水平溢出。

然而，该表似乎调整自身以适应div。

<style>
table,td{
    border:1px solid black;
}
</style>
<div style="overflow:auto;width:500px;border: 1px solid red">

<table>
<tr>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
    <td style="width:100px">a</td>
</tr>
</table>

</div>

我可以通过将表格设置为大于div的固定宽度来解决这个问题。但是这个表有不同数量的列，所以我宁愿不这样做。

有更好的方法吗？

感谢您的任何建议。

Answer 1

您可以使用

<table>
<tr>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
    <td style="min-width:100px;max-width:100px">a</td>
</tr>
</table>

但我可能会遇到IE＆lt; 8。

Answer 2

您将在表格上设置显式宽度（当然使用CSS）。据推测，如果动态生成列，则动态计算宽度也不会太难。你必须使用内联CSS，但哦，这是一个适当的情况。

表不会溢出

2 个答案: