I would like to do a Rowspan the first column of my table.
My Current table looks like this:
| Type | Color | Num |
|---|---|---|
| Car | Red | 1 |
| Car | Black | 2 |
| Car | Black | 3 |
| Bike | Yellow | 4 |
| Bike | Green | 5 |
| Bike | Yellow | 6 |
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 class="table table-striped table-bordered " style="display:inline-table;">
<thead>
<tr >
<th class="col-1">
Type
</th>
<th class="col-2">
Color
</th>
<th class="col-2">
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>
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>