使用Datalist格式化爲DIV的樣式問題表

我正在使用格式化div創建格式化爲數據表的格式。問題是表格的Header與表格的其餘部分不匹配。使用Datalist格式化爲DIV的樣式問題表

如果我刪除HeaderTemplate，它會正確排列。有關如何解決此問題的任何建議？問題的

我Datalist中.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; 
}

截圖 enter image description here

注：我明白任何其他建議，但使用DataList控件使用格式化爲一個表絕對沒有表格的Div是一個完全不在我手中的難以/不可改變的要求。

來源

2015-04-01 TimidObserver

我希望能幫助，有了這個example，雖然這將是最好把主股利和包含構成表

.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; 
}

來源

2015-04-01 17:56:17 step

這解決了這個問題。謝謝。 – TimidObserver 2015-04-01 20:53:33

即使你有一個HeaderTemplate中的元素，在渲染HTML ，「行」不包裝<div class="Table">。一個可能的解決辦法是簡單地將width:100%;添加到「.Table」類

來源

2015-04-01 18:03:11 Neps

使用Datalist格式化爲DIV的樣式問題表

回答

相關問題