使用水平滚动条设置div中表格的列宽

发布于 2025-01-06 15:15:29 字数 560 浏览 1 评论 0原文

我想设置 div 中包含的表格的列宽。表格的宽度可以超过固定宽度的 div,因此我希望 div 显示水平滚动条 - 但表格列不会扩展到我设置的宽度。我怎样才能让它发挥作用?

#content {
    width:200px;
    overflow-x: auto;
}
td,th {
   border-style:solid;
}
<div id="content">
<table style="border-style:solid;">
    <tr>
        <th style="width:50px">124</th>
        <th style="width:550px">124</th>
    </tr>
    <tr>
        <td>124</td>
        <td>124</td>
    </tr>
</table>
</div>

I want to set the column width of a table that is contained in a div. The width of the table can exceed the fixed width div, so I want the div to show a horizontal scrollbar - but the table column won't expand to the width I'm setting it at. How can I get this to work?

#content {
    width:200px;
    overflow-x: auto;
}
td,th {
   border-style:solid;
}
<div id="content">
<table style="border-style:solid;">
    <tr>
        <th style="width:50px">124</th>
        <th style="width:550px">124</th>
    </tr>
    <tr>
        <td>124</td>
        <td>124</td>
    </tr>
</table>
</div>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

停滞 2025-01-13 15:15:29

如果你想强制表格宽度,你需要使用 min-width 。

这是带有滚动条的示例:
http://jsfiddle.net/CEUVV/

You need to use min-width if you want to force the table width.

Here is your example with the scrollbar:
http://jsfiddle.net/CEUVV/

失去的东西太少 2025-01-13 15:15:29

使用最小宽度属性

    <th style="min-width:50px">124</th>
    <th style="min-width:550px">124</th> 

use min width attribute

    <th style="min-width:50px">124</th>
    <th style="min-width:550px">124</th> 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文