表不会溢出

发布于 2024-09-24 21:57:38 字数 776 浏览 0 评论 0原文

我有一个列数可变的表，我想将其放置在固定宽度的 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 的固定宽度来解决这个问题。但该表的列数是可变的，所以我宁愿不这样做。

有更好的办法吗？

感谢您的任何建议。

原文

I have a table with a variable number of columns that I want to place in a fixed width div.

I want the table columns to have a fixed width and the table to overflow horizontally inside the div if it gets too wide.

However the table seems to resize itself to fit inside the 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>

I can hack around this by setting the table to a fixed width greater than the div. But the table has a variable number of columns so I would rather not do this.

Is there a better way?

Thanks for any suggestions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赴月观长安 2024-10-01 21:57:38

您可以使用

<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 < 的问题8.

You can use

<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>

But I might have problems for IE < 8.

回复收藏 0 原文