％識別子を使用して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> 

、ここでアカウントID /名前/いいえのためのテキストボックスを含む上記のHTMLのための出力

最初の行はOKですが、下の表のコントロールは、そのの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%">