格式化为 Div 表的 Datalist 的样式问题答案

【问题标题】：Styling issue with Datalist formatted as Div Table格式化为 Div 表的 Datalist 的样式问题
【发布时间】：2015-04-01 17:23:47
【问题描述】：

我正在创建一个格式化为表格的数据列表，使用 div 进行格式化。问题是表的表头没有与表的其余部分对齐。

如果我删除 HeaderTemplate，它会正确排列。有关如何解决此问题的任何建议？

我的数据列表 Aspx

<asp:DataList ID="Table1" runat="server" RepeatColumns="1" CellSpacing="1" RepeatLayout="Table">
  <HeaderTemplate>
      <div class="Table">
      <div class="Heading">
          <div class="Cell">
             <p>Heading 1</p>
          </div>
          <div class="Cell">
             <p>Heading 2</p>
          </div>
          <div class="Cell">
             <p>Heading 3</p>
          </div>
          <div class="Cell">
             <p>Heading 4</p>
          </div>
         <div class="Cell">
             <p>Heading 5</p>
         </div>
         <div class="Cell">
             <p>Heading 6</p>
         </div>
         <div class="Cell">
             <p>Heading 7</p>
         </div>
       </div>
</HeaderTemplate>
<ItemTemplate>                    
<div class="Row">
         <div class="Cell">
             <p>Row 1 Column 1</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 2</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 3</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 4</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 5</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 6</p>
         </div>
         <div class="Cell">
              <p>Row 1 Column 7</p>
         </div>
      </div>
   </div>
</ItemTemplate>
</asp:DataList>

我的 CSS

.Table
{
display: table;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}

问题截图

注意：我很欣赏任何替代建议，但使用格式化为表格的 Datalist 使用 Divs 绝对没有表格是一个硬/不可更改的要求，我完全无法控制。

【问题讨论】：

标签： html css asp.net webforms datalist

【解决方案1】：

我希望通过这个example 提供帮助，尽管最好放置一个主 div 并包含构成表格的元素

.Table {
  display: table;
  width:100% !important;
}
.Heading {
  display: table-row;
  font-weight: bold;
  text-align: center;
}
.Row {
  display: table;
  width:100% !important;
}
.Cell {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 5px;
  padding-right: 5px;
}

【讨论】：

【解决方案2】：

即使您有一个 HeaderTemplate，在呈现的 HTML 中，“行”也不会被 <div class="Table"> 包裹。一种可能的解决方法是简单地将width:100%; 添加到“.Table”类

【讨论】：