Definieren Sie Spaltenbreite in Asp.net Tabelle mit% Identifier

Question

Ich versuche, eine einfache Benutzeroberfläche bestehend aus Beschriftungen und Textfelder zu entwerfen, aber meine Steuerelemente gehen über die Breite der übergeordneten Kontrolle. Hier ist der HTML-Code für die Tabelle.

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

und hier ist der Ausgang für die oben html

Erste Reihe Textfelder für Konto-ID/Bezeichnung enthält/Nein OK ist, aber die Steuerelemente des folgenden Tabelle sind außerhalb des übergeordneten Container, dessen CssClass gehen ist

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

}

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

Wenn ich jedoch der ersten Tabelle weitere Steuerelemente hinzufüge, gehen die Steuerelemente auch außerhalb des übergeordneten Containers.

Also Wie stimme ich richtig Kontrollen wie wir in WPF mit Tabellen und dann definieren Breite/Höhe mit Prozentsätzen?

Answer 1

Sie können es auf diese Weise angeben

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