Question

我认为我应该将项目的“索引”页面转换为使用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>

这是结果：

为什么必须指定这些“占位符”单元格以匹配上一行？

CSS DIV表模拟colspan

0 个答案: