I would like to do a Rowspan the first column of my table.

My Current table looks like this:

What I want is to merge all the rows that have the same TYPE. For this example, I should get in the Type Column only two rows; Car and Bike. I know how to do the collapse, but the thing is that I'm getting my table from data base like this :

<table  style="display:inline-table;"> 
<thead>
   <tr >     
        <th >
                    Type
        </th> 
        <th >
                    Color
        </th>
        <th >
                  Num  
      </th>
    </tr>
</thead>
<tbody>

    @foreach (var item in Model)
    {
         <tr>
     
        <td>
          
                  @item.Type
        </td> 
        <td>
          
                  @item.Color
        </td>
        <td>
                  @item.Num
        </td>     
  
    </tr>
 
    }
</tbody>

    </table> 

CodePudding user response：

Group your data:

<tbody>
@foreach (var group in Model.GroupBy(i => i.Type))
{
    var items = group.ToList();
    <tr>
        <td rowspan="@items.Count">@group.Key</td>
        <td>@items[0].Color</td>
        <td>@items[0].Num</td>
    </tr>
    @for (int index = 1; index < items.Count; index  )
    {
        <tr>
            <td>@items[index].Color</td>
            <td>@items[index].Num</td>
        </tr>
    }
}
</tbody>