Question

我正在这个页面上工作，遗憾的是，它的布局很大程度上基于表格，我没有时间和技能来做到这一点（Web开发/设计新手）。< / p>

我有1 TR，内有2 TD个。

第一个TD内部是一个嵌套表，其中包含TR和1 TD，其中包含ASP:DataGrid控件。
第二个TD还有一个嵌套表，其中包含1个TR，1个TD和2个ASP:DataGrid控件。这些ASP:DataGrid包含在<div style="OVERFLOW:auto;WIDTH:100%;HEIGHT:191px">内的2x TD中。

当用户点击搜索按钮时，将填充屏幕左侧第一个TD中的第一个网格。此TD占TR的3/4左右。当他们选择一行时，第二个TD中右边的网格会被填充，但是这些网格会展开，现在两个TD占据约1/2。

我无法弄清楚为什么宽度会发生变化。

实际HTML / ASP如下所示：

<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>

两个最根TD个元素设置为colspan 5＆amp; 3，因为我不希望它们的宽度相等。任何具有width属性的东西都设置为100％，认为它应占用包含元素的整个宽度。

对于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在CSS文件中实际上是空的，而.clsGridHeaderText只是设置字体颜色等等。

有关可能导致此问题的任何想法？

填充网格时，单元格正在改变大小

0 个答案: