Question

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

我在第三个单元格中有一个下拉列表。下拉宽度默认为100％。我给宽度：100％只是因为父单元不应该使用下拉内容进行扩展。

我面临的问题是，即使下拉列表内容较少或内容不足，下拉列表也会显示100％。如果下拉列表内容较大（或内容超出表格单元格），如何确保下拉列表的宽度为100％？

Answer 1

试

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

设置宽度：仅当css超过表格单元格时才为100％

1 个答案: