Web: Stretch all elements to the width of the longest one

I had such a problem with IE (as usual). I had a column with dropdown lists and all these lists had different width. My layout required that all of these elements had the same width.

First of all I tried to create a table with one column and place all my elements into cells. After that I set style="width: 100%" for all content of the table. It worked ideally in all browsers. Except one... Internet Explorer compressed my table to several pixels. As I understood he realized that width of my table depends on elements and width of elements depends on table. This recursion made him crazy.

I thought that if it knew actual width of table, he would scale right. So I removed "width" from tags attributes and added JavaScript in the end of the page (after load and automatic scaling) and added "width=100%" through this script (when table width is known for a browser). The same result...

My solution was to add two lines to the script before setting elements width. I got the first cell as element by ID and then changed it's width from "auto" to it's actual current width. It worked in IE, Firefox, Opera, Chrome and Safari.

Here is the example and solution:
<form name="myform">
<Table cellspacing="5" cellpadding="0">
<!-- set id for the frist cell -->
<TR><TD id="firstcell">
<select name="list1">
<option>opt1</option>
<option>opt2</option>
</select>
</TD></TR>
<TR><TD>
<select name="list2">
<!-- lengths of the elements will be different by default -->
<option>my_opt1</option>
<option>my_opt2</option>
</select>
</TD></TR>
</Table>
</form>
<!-- some other HTML here... -->
<Script language="JavaScript">
// get the first cell object and fix it's width
var firstcell = document.getElementById('firstcell');
firstcell.style.width = firstcell.offsetWidth;

document.myform.list1.style.width = '100%';
document.myform.list2.style.width = '100%';
</Script>