Table with dropdown does not resize in IE 7 when dropdown within changes its content

Question

My page consists of a table containing two dropdowns. When the first dropdown (group) changes, the second one gets new content (JavaScript), depending on the first selection.

In IE7 and IE8 in Compatibility View however the second dropdown will not resize the table.

This is what I would expect and how it looks like in other browsers (The dropdown extends to the size of its largest value):

Any idea how I could get the same behavior in IE7?

This is the code:

<table border="1" style="background-color: silver; margin: 0; padding: 0">
<tr>
    <td style="background-color: #336; color: white; font-weight: bold">Process Monitor  </td>
</tr>
<tr><td>
    <table style="border: 0; margin: 0; padding: 0">
    <tr>
        <td width="10px">&nbsp;</td>
        <td><form name="rid_select" "action="?" method="GET">
            <select id="pvar_pri" name="pvar_pri" onChange="setOptions(this.options[this.selectedIndex].value)">
                <option value="0">Select group</option>
                <option value="5">Item 1</option>
                <option value="10">Item 2</option>
            </select>
            <select id="pvar_sec" name="pvar_sec" onChange="this.form.submit()">
                <option value="">Select variable</option>
            </select>
            <input type="submit" value="Select">
        </form></td>
        <td width="10px">&nbsp;</td>
    </tr>
    </table>
</td>
</tr></table>

Answer 1

I really have try to solve this issue using only CSS but still have not got any results.

I can offer you an alternative solution as your table is small and redrawing it should not take much time and resources:

1. Add ID of the table that holds the form

   <table id="FormCointaner">
   

2. Set onchange function of the first select box that redraws the table on each value changed

   $(document).on('change','#pvar_pri',function(){
       $('#FormCointaner').html($('#FormCointaner').html());
   });
   

According to me, because of some reason, IE is not redrawing the table when new elements are added.

You can check my idea here:

http://jsfiddle.net/jnKnx/