asp:gridview header vertical alignment using css

Question

I am trying to align my grid view vertically using css but the problem is when I do that the data fields goes under the header fields instead of being parallel to it.

what I need is:

HEADER1 : DATA FIELD1

HEADER2 : DATA FIELD2

HEADER3 : DATA FIELD3

But what I get is:

HEADER1

HEADER2

HEADER3

DATA FIELD1

DATA FIELD2

DATA FIELD3

look at the image for better understanding.

Please help me fix it.

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

You are using the wrong datapresentation control here. What you ideally need is a asp:DetailsView. You can use it like this.

<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>