CSS与ASP.NET表控件冲突

问题描述

| 我有一些单选按钮，在它们上面应用了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;
}

    

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）