How to create nested cells inside one TD table

Question

I have the following table: -

<table class="table table-striped"> <thead> <tr> <th></th> </tr> </thead> <tbody> @foreach(var permisionMag in Model.PermisionManagement) { <tr> <td>@permisionMag.Name</td> @{ int i = 0; <td class="f"> @foreach(var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) { @(i+1) @item.Name i = i + 1; } <br /> </td> } </tr> } </tbody> </table> 

But now I need a second column to have nested rows, and not show rows inside a single TD? any advice on this?

Answer 1

You can use rowspan in the first column:

 <table class="table table-striped"> <thead> <tr> <th></th> </tr> </thead> <tbody>@foreach(var permisionMag in Model.PermisionManagement) { <tr> <td rowspan="@permisionMag.TechnologyTypes.Count()">@permisionMag.Name</td> @{ int i = 0; foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) { i = i + 1; if( i > 1) { </tr><tr> } <td class="f"> @(i+1) @item.Name </td> } } </tr> } </tbody> </table> 

See Expected Result

Hope this helps.

Answer 2

You cannot directly generate table cells, you need to create a new table in the second table cell. You can also display @item.Name as span / div and style to create the illusion of a nested table ( jsFiddle example ).

Answer 3

If I understand your question, you probably want to do this:

 @foreach(var permisionMag in Model.PermisionManagement) { <tr> <td rowspan="@permisionMag.TechnologyTypes.Count()">@permisionMag.Name</td> @{int i = 0; @foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) { <td class="f"> @(i+1) @item.Name i = i + 1; </td> </tr> <tr> } </tr> } } 

But it should essentially build you something like this:

 ---------------- | Name | Item1 | | | ----- | | | Item2 | | | ----- | | | Item3 | | | ----- | | | Item4 | ----------------