I have a table in my web site, with a select element in one of the cells. If I try to change the content of the element, everything works fine in most of the browsers that I've tried (including IE6, surprisingly enough), but in IE7, the table cell does not adjust its width to fit the select element. Is there any way to make the table cell resize itself properly?
You can see the problem for yourself with this simple test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Table cell width test</title>
</head>
<body>
<table>
<tr>
<td style="border: solid black 1px">
<select id="test">
</select>
</td>
</tr>
</table>
<script type="text/javascript">
window.onload = function() {
var option = document.createElement("option");
option.innerHTML = "asdfasdfasdfasdfasdfasdfasdfasdf";
document.getElementById("test").appendChild(option);
};
</script>
</body></html>