2
我有一些單選按鈕，我在其上應用css來對齊它們。 這裏是圖像：CSS與ASP.NET表格控件衝突
這些都放置在一個表和表中的第三列中包含針對每一對單選按鈕中的一個列表框或下拉列表，並且當我點擊第二個單選按鈕，隱藏列表框或下拉菜單出現在第三欄。
因爲我已經在其上應用css來設置它的高度和寬度，所以當我單擊每對中的第二個單選按鈕並出現listbox時，第三列不會動態增長。查看圖片：
我不能刪除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;
}