html - 使用 % 标识符在 Asp.net 表中定义列宽

Question

我正在尝试设计一个包含标签和文本框的简单 UI，但我的控件超出了父控件的宽度。这是表格的 html。

<asp:Table ID="Table3" runat="server">
    <asp:TableHeaderRow Font-Size="X-Small" Font-Bold="true">
        <asp:TableHeaderCell CssClass="CellWidth10">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth20">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth10">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth20">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth10">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth20">
        </asp:TableHeaderCell>
    </asp:TableHeaderRow>
    <asp:TableRow>
        <asp:TableCell >
            <asp:Label ID="TextBox7" Runat="Server" Text="User ID"/>
        </asp:TableCell>
        <asp:TableCell >
            <asp:TextBox ID="TextBox1" Runat="Server"/>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Label ID="Label2" Runat="Server" Text="UserName"/>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="TextBox2" Runat="Server"/>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Label ID="Label3" Runat="Server" Text="Badge No"/>
        </asp:TableCell>
         <asp:TableCell>
             <asp:TextBox ID="TextBox3" Runat="server" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table> 

这是上述 html 的输出

包含帐户 ID/名称/编号的文本框的第一行是可以的，但下表的控件超出了 cssClass 为的父容器

.content-wrapper {
margin: 0 auto;
max-width: 960px;

.CellWidth10 { width: 10%; }
.CellWidth20 { width: 20%; }

但是如果我向第一个表添加更多控件，它的控件也会超出父容器。

那么我如何正确调整控件的步调，就像我们在 WPF 中使用表格然后使用百分比定义宽度/高度一样？

Answer 1

可以这样指定

<asp:TableHeaderCell CssClass="CellWidth10" Width="10%">
<asp:TableHeaderCell CssClass="CellWidth20" Width="20%">