我有这个 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/