Define column's width in Asp.net table using % identifier
<p>I am trying to design a simple UI consisting labels and textboxes but my controls are going beyond the width of parent control. Here is the html for the table.</p>

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

<p>and here is the output for the above html
<a href="https://i.stack.imgur.com/smW09.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/smW09.png" alt="enter image description here"></a></p>

<p>First row containing textBoxes for Account ID/Name/No is OK but the below table's controls are going outside the parent container whose cssClass is</p>

<pre><code>.content-wrapper {
margin: 0 auto;
max-width: 960px;
</code></pre>

<p>}</p>

<pre><code>.CellWidth10 { width: 10%; }
.CellWidth20 { width: 20%; }
</code></pre>

<p>But if I add more control's to the first table, its controls also go outside the parent container.</p>

<p>So How do I correctly pace controls like we do in WPF using tables and then defining width/height using percentages?</p>