How do I apply column and row styles on a TableLayoutPanel programmatically?
<p>In the beginning there is a TableLayoutPanel with only one row and no columns. By the press of a button I want this panel to be transformed with <strong>5 rows and 3 columns</strong>.</p>

<pre><code>private void button_Click(object sender, EventArgs e)
    {
        this.tableLayoutPanel1.ColumnCount = 3;
        this.tableLayoutPanel1.RowCount = 5;
    }
</code></pre>

<p>The problem is that you get this as a result!</p>

<p><a href="https://i.stack.imgur.com/NlcOA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NlcOA.png" alt="enter image description here"></a></p>

<p>The boxes that are created with the rows and columns do not contain the same area in the panel, as you can see. </p>

<p>In the case of 3 columns and 5 rows, the columns must share the 100% of the tablelayoutpanel, so 30% per each. In the case of 5 rows, each row must take 20%.</p>

<p>So I append to the button_Click method the next two lines of code.</p>

<pre><code>this.tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 30F));
this.tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 20F));
</code></pre>

<p>But I get the same result! 
What I am missing?</p>