使用 % 标识符在 Asp.net 表中定义列的宽度答案

【问题标题】：Define column's width in Asp.net table using % identifier使用 % 标识符在 Asp.net 表中定义列的宽度
【发布时间】：2016-11-17 03:47:17
【问题描述】：

我正在尝试设计一个包含标签和文本框的简单 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 的输出

包含 Account ID/Name/No 的文本框的第一行是可以的，但下表的控件超出了其 cssClass 为的父容器

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

}

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

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

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

【问题讨论】：

标签： html css asp.net width

【解决方案1】：

你可以这样指定

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

【讨论】：