Come creare cellule annidati all'interno della stessa tabella TD

Question

Ho la seguente tabella: -

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

ma attualmente ho bisogno la seconda colonna a hanno nidificato le righe invece di mostrare le righe all'interno della stessa TD? qualche consiglio su questo?

Answer 1

È possibile utilizzare rowspan sulla prima colonna :

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

Spero che aiuti.

Answer 2

Non è possibile generare direttamente celle di tabella, è necessario generare una nuova tabella all'interno della seconda cella di tabella. È anche possibile eseguire il rendering di @item.Name come span/div e stile per creare l'illusione di una tabella nidificata (jsFiddle example).

Answer 3

Se ho capito la tua domanda, allora probabilmente vuole fare questo:

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

ma dovrebbe in sostanza si costruire qualcosa di simile:

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