asp：gridview标题使用css垂直对齐

Question

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

我需要的是：

头1：DATA FIELD1

HEADER2：DATA FIELD2

HEADER3：DATA FIELD3

但我得到的是：

头1

HEADER2

HEADER3

DATA FIELD1

DATA FIELD2

DATA FIELD3

看图像以便更好地理解。

请帮我解决这个问题。

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> 

现在我的表看起来像这样

感谢纳文我有这样的想法你发送

链接

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>