Làm thế nào để tạo ra các tế bào bên trong lồng nhau cùng một bảng TD

Question

Tôi đã theo bảng dưới đây: -

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

Nhưng hiện tôi cần cột thứ hai đã lồng hàng thay vì hiển thị các hàng bên trong TD giống nhau không? bất kỳ lời khuyên nào về điều này?

Answer 1

Bạn có thể sử dụng rowspan trên cột đầu tiên :

<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

Tôi hy vọng điều đó sẽ hữu ích.

Answer 2

Bạn không thể tạo trực tiếp ô bảng, bạn phải tạo bảng mới bên trong ô bảng thứ hai. Bạn cũng có thể hiển thị @item.Name làm khoảng/div và kiểu để tạo ảo ảnh của bảng lồng nhau (jsFiddle example).

Answer 3

Nếu tôi hiểu câu hỏi của bạn, sau đó bạn có thể muốn làm điều này:

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

Nhưng về cơ bản nên xây dựng cho bạn một cái gì đó như thế này:

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