html - ASP :gridview header vertical alignment using css

Question

我正在尝试使用 css 垂直对齐我的 GridView ，但问题是当我这样做时数据字段位于标题字段下方而不是与其平行。

我需要的是:

HEADER1 : DATA FIELD1

标题 2:数据字段 2

标题 3:数据字段 3

但我得到的是:

标题 1

标题2

标题 3

数据字段1

数据字段2

数据字段 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

您在这里使用了错误的数据呈现控件。您理想情况下需要的是 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>