cells are changing size when grids are populated

Question

I'm working on this page that, unfortunately, has its layout largely based on tables and I don't have the time nor the skills to do it properly (new to web dev / design).

I have 1 TR with 2 TD's inside.

• Inside the first TD is a nested table which has 1 TR and 1 TD which contains an ASP:DataGrid control.
• The second TD also has a nested table, which contains 1 TR, 1 TD, and 2 ASP:DataGrid controls. These ASP:DataGrid's are contained in 2x <div style="OVERFLOW:auto;WIDTH:100%;HEIGHT:191px"> inside the TD.

When the user clicks the search button, the first grid in the first TD on the left of the screen is populated. This TD takes up about 3/4 of the TR. When they select a row, the grids on the right, in the second TD, are populated, but these expand and now both TD's take up about 1/2 each.

I cannot figure out why their widths are changing.

Actual HTML/ASP looks like this:

<TR>
    <TD align="left" colSpan="5" height="242" valign="top" align="center">
        <TABLE class="clsBorderColor" cellpadding="3" cellspacing="3" height="100%">
            <TR>
                <TD valign="top" class="style2">
                    <asp:datagrid id="dgICDCodes" runat="server" bodyHeight="300px" CssClass="tblScroll" Width="100%" PageSize="12">
                        <Columns>
                            <asp:TemplateColumn ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="clsGridHeaderText" HeaderStyle-Wrap="False" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                                <HeaderTemplate>Select</HeaderTemplate>
                                <ItemTemplate><asp:RadioButton ID="rbSelect" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Code")%>' AutoPostBack="true" OnCheckedChanged="rbSelect_CheckedChanged" ondatabinding="rbSelect_DataBinding" /></ItemTemplate>
                                <HeaderStyle Wrap="False" CssClass="clsGridHeaderText" Width="10%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Width="10%"></ItemStyle>
                            </asp:TemplateColumn>
                        </Columns>
                    </asp:datagrid>
                </TD>
            </TR>
        </TABLE>
    </TD>

    <TD colspan="3" valign="top" align="center">
        <TABLE class="clsBorderColor" cellpadding="3" cellspacing="3" width="100%">
            <TR>
                <TD>Additional Code For Tier
                    <DIV style="OVERFLOW:auto;WIDTH:100%;HEIGHT:191px">
                        <asp:DataGrid ID="dgICDCodes_AdditionalTier" runat="server" bodyHeight="400px" CssClass="tblScroll" Width="100%">
                            <Columns>
                                <asp:TemplateColumn HeaderStyle-CssClass="clsGridHeaderText" HeaderStyle-Width="10%" HeaderStyle-Wrap="False" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%">
                                    <HeaderTemplate>Select</HeaderTemplate>
                                    <ItemTemplate><asp:Checkbox ID="chkTSelect" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Code")%>' AutoPostBack="true" OnCheckedChanged="chkSelect_CheckedChanged" ondatabinding="chkSelect_DataBinding" /></ItemTemplate>
                                    <HeaderStyle Wrap="False" CssClass="clsGridHeaderText" Width="10%"></HeaderStyle>
                                    <ItemStyle HorizontalAlign="Left" Width="10%"></ItemStyle>
                                </asp:TemplateColumn>
                            </Columns>
                        </asp:DataGrid>
                    </DIV>
                    <BR />Additional Code For Compliance
                    <DIV style="OVERFLOW:auto;WIDTH:100%;HEIGHT:191px">
                        <asp:datagrid id="dgICDCodes_AdditionalCompliance" runat="server" bodyHeight="400px" CssClass="tblScroll" Width="100%">
                            <Columns>
                                <asp:TemplateColumn ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="clsGridHeaderText" HeaderStyle-Wrap="False" HeaderStyle-Width="10%" ItemStyle-Width="10%">
                                    <HeaderTemplate>Select</HeaderTemplate>
                                    <ItemTemplate><asp:Checkbox ID="chkPSelect" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Code")%>' AutoPostBack="true" OnCheckedChanged="chkSelect_CheckedChanged" ondatabinding="chkSelect_DataBinding" /></ItemTemplate>
                                    <HeaderStyle Wrap="False" CssClass="clsGridHeaderText" Width="10%"></HeaderStyle>
                                    <ItemStyle HorizontalAlign="Left" Width="10%"></ItemStyle>
                                </asp:TemplateColumn>
                            </Columns>
                        </asp:datagrid>
                    </DIV>
                </TD>
            </TR>
        </TABLE>
    </TD>
</TR>

The two root-most TD elements are set to colspan 5 & 3, as I don't want them to be equal widths. Anything with a width property is set to 100%, thinking that it should take up the full width of the containing element.

For the CSS:

.style2
{
    width: 650px;
}

.clsBorderColor
{
    border-right: #0080c0 1px solid;
    border-top: #0080c0 1px solid;
    border-left: #0080c0 1px solid;
    border-bottom: #0080c0 1px solid;
}

.tblScroll is actually empty in the CSS file and .clsGridHeaderText just sets font colors and things like that.

Any thoughts on what might be causing this?