【发布时间】：2018-01-21 01:04:14
【问题描述】：
我有一些单选按钮，我在这些单选按钮上应用了 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;
}
【问题讨论】：
标签： css asp.net html-table