CSS конфликтует с табличным управлением ASP.NET

Question

У меня есть несколько переключателей, к которым я применил css для их выравнивания. Вот изображение:

Все они размещены в таблице, а третий столбец таблицы содержит один список или раскрывающийся список для каждой пары переключателей, и когда я нажимаю второй переключатель, скрытый список или раскрывающийся список появляются в третьем столбце.

Поскольку я применил css к нему, чтобы установить его высоту и ширину, когда я нажимаю второй переключатель каждой пары и появляется список, третий столбец динамически не увеличивается. Смотрите изображение:

Я не могу удалить CSS, потому что выравнивание пострадает.

С правой стороны есть еще одна таблица, которую я хочу также увеличивать или уменьшать в зависимости от нажатия переключателей. Но он не уместился в первую таблицу, потому что я не очень хорошо представляю себе css, поэтому я разделяю его, но я действительно хочу, чтобы это как-то слилось с первой таблицей, не затрагивая структуру таблицы.

Код aspx левой таблицы:

<div class="formBroadLeftCol">
                    <table border="1">
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllStaff" runat="server" Text="All Staff" AutoPostBack="true"
                                    Checked="true" GroupName="grpStaff" OnCheckedChanged="rdoAllStaff_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoStaff" runat="server" Text="Staff" AutoPostBack="true" GroupName="grpStaff"
                                    OnCheckedChanged="rdoStaff_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divStaff" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstStaff" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllService" runat="server" Text="All Services" AutoPostBack="true"
                                    Checked="true" GroupName="grpService" OnCheckedChanged="rdoAllService_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoService" runat="server" Text="Service" AutoPostBack="true"
                                    GroupName="grpService" OnCheckedChanged="rdoService_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divService" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstService" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllServiceType" runat="server" Text="All Service Types" AutoPostBack="true"
                                    Checked="true" GroupName="grpServiceType" OnCheckedChanged="rdoAllServiceType_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoServiceType" runat="server" Text="Service Type" AutoPostBack="true"
                                    GroupName="grpServiceType" OnCheckedChanged="rdoServiceType_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divServiceType" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstServiceType" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllServiceStatus" runat="server" Text="All Service Statuses"
                                    AutoPostBack="true" Checked="true" GroupName="grpServiceStatus" OnCheckedChanged="rdoAllServiceStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoServiceStatus" runat="server" Text="Service Status" AutoPostBack="true"
                                    GroupName="grpServiceStatus" OnCheckedChanged="rdoServiceStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divServiceStatus" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstServiceStatus" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllTreatmentProvider" runat="server" Text="All Treatment Provider"
                                    AutoPostBack="true" Checked="true" GroupName="grpTreatmentProvider" OnCheckedChanged="rdoAllTreatmentProvider_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoTreatmentProvider" runat="server" Text="Treatment Provider"
                                    AutoPostBack="true" GroupName="grpTreatmentProvider" OnCheckedChanged="rdoTreatmentProvider_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divTreatmentProvider" runat="server" visible="false" class="divListBox"
                                    style="width: 175px; height: 80px;">
                                    <asp:ListBox ID="lstTreatmentProvider" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist" DataSourceID="dtsTreatmentProviders" DataTextField="FirstName" DataValueField="ServiceId"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllConsumerStatus" runat="server" Text="All Consumer Statuses"
                                    AutoPostBack="true" Checked="true" GroupName="grpConsumerStatus" OnCheckedChanged="rdoAllConsumerStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoConsumerStatus" runat="server" Text="Consumer Status" AutoPostBack="true"
                                    GroupName="grpConsumerStatus" OnCheckedChanged="rdoConsumerStatus_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divConsumerStatus" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstConsumerStatus" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist" DataSourceID="dtsClientStatus"
                                        DataTextField="Status" DataValueField="Id"></asp:ListBox>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdShortLeft">
                                <asp:RadioButton ID="rdoAllEhnicity" runat="server" Text="All Ehnicities" AutoPostBack="true"
                                    Checked="true" GroupName="grpEhnicity" OnCheckedChanged="rdoAllEhnicity_CheckedChanged" />
                            </td>
                            <td class="tdShortRight">
                                <asp:RadioButton ID="rdoEhnicity" runat="server" Text="Ehnicity" AutoPostBack="true"
                                    GroupName="grpEhnicity" OnCheckedChanged="rdoEhnicity_CheckedChanged" />
                            </td>
                            <td class="tdShortMiddle">
                                <div id="divEhnicity" runat="server" visible="false" class="divListBox" style="width: 175px;
                                    height: 80px;">
                                    <asp:ListBox ID="lstEhnicity" runat="server" SelectionMode="Multiple" Width="175px"
                                        Height="81" CssClass="SingleColumnlist" DataSourceID="dtsEthnicity" 
                                        DataTextField="LookupItem" DataValueField="Id"></asp:ListBox>
                                </div>
                            </td>

                        </tr>
                    </table>

Таблица кодов прав:

<div class="formShortRightCol">
                        <table border="1">
                            <tr>
                                <td>
                                <asp:CheckBoxList ID="chkStaff" runat="server" RepeatDirection="Horizontal">
                                            <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                            <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                        </asp:CheckBoxList>
                                        </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkService" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkServiceType" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkServiceStatus" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkTreatmentProvider" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkConsumerStatus" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBoxList ID="chkEthnicity" runat="server" RepeatDirection="Horizontal">
                                        <asp:ListItem Text="Display" Value="Display"></asp:ListItem>
                                        <asp:ListItem Text="Sub Totals" Value="Sub Totals"></asp:ListItem>
                                    </asp:CheckBoxList>
                                </td>
                            </tr>
                        </table>
                    </div>

Соответствующие классы CSS:

.formBroadLeftCol
{   
    padding: 0px 0px 0px 0px;
    float:left; 
    width:450px;
}

.formShortRightCol
{
    padding: 0px 0px 0px 0px;
    float:right; 
    /*width:180px;*/
}

.tdShortLeft
{
    width:150px;
    height:20px;
    float:left; 
    padding: 5.5px 0px 5.5px 0px;
}

.tdShortRight
{
    width:150px;
    height:20px;
    /*float:right; */
    padding: 5.5px 0px 5.5px 0px;
}

.tdShortMiddle
{
    width:100px;
    height:20px;
    float:right;
    margin:0px 25px 0px 0px;
    padding: 5.5px 0px 5.5px 0px;
}

Answer 1

Это происходит потому, что вы создали плавающий макет для различных элементов блока.Плавающие элементы выходят из нормального потока страницы.

Вы не думаете, что вам нужно применять float к td.Вы можете использовать text-align: left; для выравнивания элемента в td.