asp：gridview header cssを使用した垂直方向の整列

Question

cssを使用してグリッドビューを垂直に揃えようとしていますが、データフィールドが平行ではなくヘッダーフィールドの下にあるという問題があります。

HEADER1：：DATA FIELD1

HEADER2：DATA FIELD2

HEADER3：私は必要なもの

があり、DATA FIELD3

しかし、私が得ることである。

HEADER1

HEADER2

HEADER3

DATA FIELD1

DATA FIELD2

データフィールド3

画像を見て分かりやすくしてください。

私はそれを修正する助けてください。

CSS：

.ChildGrid td{ 
    background-color: #eee !important; 
    color: black; 
    font-size: 10pt; 
    line-height:200%; 
} 
.ChildGrid th{ 
    background-color: #6C6C6C !important; 
    color: White; 
    font-size: 10pt; 
    line-height:200%; 
} 
table.ChildGrid, table.ChildGrid tr, table.ChildGrid td, table.ChildGrid th{ 
    display:block 
} 

HTML：

<asp:GridView ID="gvSDate2" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid"> 

    <Columns> 
    <asp:TemplateField ItemStyle-Width="150px" HeaderText="ID"> 
     <ItemTemplate> 
     <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>' /> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி"> 
     <ItemTemplate> 
     <asp:TextBox ID="textFunction" runat="server" Text='<%#Eval("Function") %>' /> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி தேதி"> 
     <ItemTemplate> 
     <asp:TextBox ID="textFunctionDate" runat="server" Text='<%#Eval("FunctionDate") %>' /> 
     </ItemTemplate> 
    </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

Answer 1

私が代わりにCSS

<asp:GridView ID="gvSDate2" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" OnRowUpdating="updategvSDate2"> 
    <Columns> 
     <asp:TemplateField> 
     <ItemTemplate> 
      <table width="100%" cellpadding="2" cellspacing="2"> 
      <tr> 
      <th>ID</th> 
      <td><asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>' /></td> 
      </tr> 
      <tr> 
      <th>நிகழ்ச்சி</th> 
      <td><asp:TextBox ID="textFunction" runat="server" Text='<%#Eval("Function") %>' /></td> 
      </tr> 
      <tr> 
      <th>நிகழ்ச்சி தேதி</th> 
      <td><asp:TextBox ID="textFunctionDate" runat="server" Text='<%#Eval("FunctionDate") %>' /></td> 
      </tr> 
      <tr> 
      <th>நிகழ்ச்சி நேரம்</th> 
      <td> 
      <asp:DropDownList ID="textFunctionTime" runat="server" Text='<%#Eval("FunctionTime") %>'> 
       <asp:ListItem Value="">--Select--</asp:ListItem> 
       <asp:ListItem Value="காலை 05:00AM - 01:00PM">காலை 05:00AM - 01:00PM</asp:ListItem> 
       <asp:ListItem Value="மாலை 02:00PM - 10:00PM">மாலை 02:00PM - 10:00PM</asp:ListItem> 
       <asp:ListItem Value="முழு நாள் 05:00AM - 10:00PM">முழு நாள் 05:00AM - 10:00PM</asp:ListItem> 
      </asp:DropDownList></td> 
      </tr> 
     </table> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:ButtonField CommandName="Update" Text="Update" /> 
    </Columns> 
</asp:GridView> 

に取り組んで、今、私の表は、この

感謝のNaveenのように見える私はあなたが

を送ったリンクから、このアイデアを得た何か他のものを試してみました

Answer 2

あなたがここで間違ってdatapresentationコントロールを使用しています。理想的に必要なのはasp:DetailsViewです。このように使うことができます。

<asp:DetailsView ID="FunctionDetails" runat="server" 
    AutoGenerateRows="False" 
    DataKeyNames="ID" 
    HeaderText="Author Details"> 
    <Fields> 
     <asp:TemplateField ItemStyle-Width="150px" HeaderText="ID"> 
      <ItemTemplate> 
       <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'> 
       </asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி"> 
      <ItemTemplate> 
       <asp:TextBox ID="textFunction" runat="server" 
        Text='<%#Eval("Function") %>'> 
       </asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி தேதி"> 
      <ItemTemplate> 
       <asp:TextBox ID="textFunctionDate" runat="server" 
        Text='<%#Eval("FunctionDate") %>'> 
       </asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Fields> 
</asp:DetailsView>