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

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

我需要的是：

标题1：数据字段1

标题2：数据字段2

标题3：数据字段3

但我得到的是：

校长1

校长2

校长3

数据字段1

数据字段2

数据字段3

请看图片以便更好地理解

请帮我修一下

CSS:

HTML:

---

您在此处使用了错误的datapresentation控件。理想情况下，你需要的是一份工作。你可以这样使用它

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

---

我尝试了其他方法，而不是使用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，我从您发送的链接中获得了这个想法
尝试在gridview中使用
HeaderStyle CssClass
，并添加一个css类以使其在同一行中对齐好的，我添加了css类好的，请您帮助我使用准确的css代码将其与数据字段对齐好吗？只有一行数据？是的，只有一行数据如果您可以粘贴渲染标记到那时答案会更容易确定我会尝试这种方法，但我能在这个方法上使用更新按钮吗？好的，但这是一个嵌套的gridview，它从后端代码获取数据，我担心它会把事情搞砸，但我无论如何都会尝试，看看你是否可以使用
Repeater control
并设置属性
RepeatDirection=“Horizontal”
。我可以帮你。
<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>

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