CSS DIV таблицы, эмулирующие colspan

Question

Я подумал, что преобразовал бы страницы "Index" моего проекта, чтобы использовать DIV вместо таблиц. Но я столкнулся с проблемой при попытке эмулировать атрибут "colspan" элемента.

Вот как выглядит моя страница с использованием таблиц с нижней границей каждой второй строки, проходящей по всей ширине содержащей строки.

Итак, заменил HTML следующим:

<h2>Courses Available</h2>
<div class="rTable">
  <div class="rTableBody">
    <div class="rTableRow">
      <div class="rTableHeading th" style="width: 15%;">@Html.DisplayNameFor(model => model.Code)</div>
      <div class="rTableHeading th" style="width: 35%;">@Html.DisplayNameFor(model => model.Name)</div>
      <div class="rTableHeading th" style="width: 10%;">@Html.DisplayNameFor(model => model.Price)</div>
      <div class="rTableHeading th" style="width: 10%;">@Html.DisplayNameFor(model => model.IsAccredited)</div>
      <div class="rTableHeading th"> </div>
    </div>
    @foreach (var item in Model)
    {
      <div class="rTableRow">
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.Code)</div>
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.Name)</div>
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.Price)</div>
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.IsAccredited)</div>
        <div class="rTableCell">@Html.ActionLink("Go to Modules for this Course", "Info", "Modules", null, new { id = item.ID })</div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell2" style="text-align: right;"><strong>Synopsis: </strong></div>
        <div class="rTableCell2" style="color: cornflowerblue;">@Html.Raw(item.Description)</div>
      </div>
    }
  </div>
</div>

Запуск этого с этим CSS:

/*       Start      */
/* For div "tables" */
.rTable {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.rTableRow {
    display: table-row;
}
.rTableHeading {
    display: table-header-group;
    font-weight: bold;
    border-bottom: 1px solid #CCC;
}
.rTableCell,
.rTableCell2,
.rTableHeading {
    display: table-cell;
    padding: 2px 4px 4px 4px;
    /*border: 1px solid #999999;*/
}
.rTableCell2 {
    border-bottom: 1px solid #CCC;
}
.rTableFoot {
    display: table-footer-group;
    font-weight: bold;
    background-color: #ddd;
}
.rTableBody {
    display: table-row-group;
}

Вот что я получил:

Строка идет только ко второй "ячейке" в предыдущем ряду. Даже если я укажу ширину 85% для этой второй ячейки во второй строке, это не имеет значения.

Если я добавлю ячейки-заполнители, как показано ниже, строка расширится:

<h2>Courses Available</h2>
<div class="rTable">
  <div class="rTableBody">
    <div class="rTableRow">
      <div class="rTableHeading th" style="width: 15%;">@Html.DisplayNameFor(model => model.Code)</div>
      <div class="rTableHeading th" style="width: 35%;">@Html.DisplayNameFor(model => model.Name)</div>
      <div class="rTableHeading th" style="width: 10%;">@Html.DisplayNameFor(model => model.Price)</div>
      <div class="rTableHeading th" style="width: 10%;">@Html.DisplayNameFor(model => model.IsAccredited)</div>
      <div class="rTableHeading th"> </div>
    </div>
    @foreach (var item in Model)
    {
      <div class="rTableRow">
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.Code)</div>
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.Name)</div>
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.Price)</div>
        <div class="rTableCell">@Html.DisplayFor(modelItem => item.IsAccredited)</div>
        <div class="rTableCell">@Html.ActionLink("Go to Modules for this Course", "Info", "Modules", null, new { id = item.ID })</div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell2" style="text-align: right;"><strong>Synopsis: </strong></div>
        <div class="rTableCell2" style="color: cornflowerblue;">@Html.Raw(item.Description)</div>
        <div class="rTableCell2">&nbsp;</div>
        <div class="rTableCell2">&nbsp;</div>
        <div class="rTableCell2">&nbsp;</div>
      </div>
    }
  </div>
</div>

Это результат:

Почему я должен указывать эти ячейки-заполнители в соответствии с предыдущей строкой?