html table: row 2 alters the length of row 1 - html

Question

I am trying to create a tree with a three elements. Main Element, -> children, -> children.
I got pretty far, I can even collaps entire portions of the table. The problem however is, when I collabs row two.
At first, the table looks like this:
Which is fine. I have three <td> in one row.
However, if I show the second row (clicking on my blue arrow),
this is the result:
So, what happens is that the second <tr> then pushes the elements of the second <td> so much forward, that "SubKategorie_1 DELETE" has enough room to fit before "Hauptkategorie_1" begins, which is in a different table row.
I am pretty sure that all I need is a css attribute.
Ill give you the code shortend:
<table class="mainTable">
#{
var position = 0;
for (int i = 0; i < Model.MainNodes.Count(); i++)
{
string catId = "CatId" + i.ToString();
string classToHideCatId = "classToHideCatId" + i.ToString();
<tr class="mainCatRow">
<td>
<div>
<img src="#Url.Content("~/Content/images/icons/icon-open.png")" id="#catId" class="buttonLayoutMain" />
</div>
</td>
<td>
<div class="mainCat">
#Model.MainNodes[i].name
</div>
<td>
Delete
</td>
</tr>
<!--subcategory-->
<tr class="tr2">
<td>
<div class="#classToHideCatId">
<table class="subTable">
...
</table>
</div>
</td>
</tr>
}
}
</table>
With some basic CSS:
.MainDiv{
padding: 20px;
}
.mainTable{
background-color: green;
}
.mainCat {
font-size: 20px;
}
.mainCatRow{
background-color:orange;
}
.subCat {
margin-left: 40px;
font-size: 18px;
}
.tr2{
background-color:gray;
}
.subsubTable {
margin-left: 80px;
}
Question:
How can I make my table have differnt lenght rows?