gpt4 book ai didi

css - 设置宽度 :100% in css only when it exceeds the table cell

转载 作者:行者123 更新时间:2023-11-28 05:33:54 24 4
gpt4 key购买 nike

我有这个 html 页面,其中包含一个包含 3 列和一行的表格。

<html><head>    
<title>Test input text in table</title>
<style type="text/css">
table {width:500px; border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
#selectbox {
width : 100%;
}
</style>
</head><body>

<table cellpadding="0" cellspacing="0">
<tr>
<td><p>column one</p></td>
<td><p>column two</p></td>
<td><p>column three</p></td>
</tr>
<tr>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
<td style="width:300px">Dymamic Text : <select id="selectbox"><option value="1">Small Content1</option>
<option value="2">Small Content2</option>
</select>
</td>
</tr>
</table>

</body></html>

我在第 3 个单元格中有一个下拉菜单。下拉宽度默认为 100%。我给出 width:100% 只是因为父单元格不应随着下拉内容展开。

我面临的问题是,即使下拉菜单内容较少或没有内容,下拉菜单也会 100% 显示。如何确保下拉列表仅在内容较大(或内容超出表格单元格)时才获得 100% 的宽度?

最佳答案

尝试

#selectbox {        
width : 50%;//or try 'auto'
max-width : 100%;
}

关于css - 设置宽度 :100% in css only when it exceeds the table cell,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38344579/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com