сгруппированные строки bootstrap в проектах ASP.Net MVC

Представление получает данные из модели @model IEnumerable<Project.Models.Person>, в модели определены поля такие как ФИО, Email, возраст, город и т.д.
Как сделать таблицу с группировкой строк по городам?
Вот что уже пытался сделать

<table id="example1" class="table table-bordered table-striped">
<thead>
    <tr>
        <th>ФИО</th>
        <th>Email</th>
        <th>Возраст</th>
        <th>Данные1</th>
        <th>Данные3</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.Select(x => x.City).Distinct())
    {
        <tr>
            <td><strong>@Html.DisplayFor(modelItem => item)</strong></td>
        </tr>
            foreach (var item1 in Model.Where(p=> p.City == item))
            {
                <tr>
                    @if (item2.organization == "Рога и копыта")
                    {
                        <td><a href="javascript:void(0);" class="details" data-id="@item2.Name">@item2.Name</a></td>
                        <td align="center">@Html.DisplayFor(modelItem => item2.Email)</td>
                        <td align="center">@Html.DisplayFor(modelItem => item2.data1)</td>
                        <td align="center">@Html.DisplayFor(modelItem => item2.data2)</td>
                        <td align="center">@Html.DisplayFor(modelItem => item2.data3)</td>
                    }
                </tr>
            }
    }
</tbody>

В моем представлении не все гладко, лишние ячейки отображаются. Хотя данные выводятся, хотелось бы использовать Bootstrap. Может кто подскажет куда двигаться?

Правка

Пытаюсь получить что то похожее на это