使用水平滚动条设置div中表格的列宽
我想设置 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果你想强制表格宽度,你需要使用 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/
使用最小宽度属性
use min width attribute