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>