使用 css 的 asp:gridview 标题垂直对齐

Question

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

我需要的是：

HEADER1：数据字段1

HEADER2：数据字段2

HEADER3：数据字段3

但我得到的是：

HEADER1

HEADER2

HEADER3

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

我尝试了其他方法而不是使用 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

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