Question

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

我需要的是：

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

您在此处使用了错误的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>

Answer 2

我尝试了其他方法，而不是使用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我从你发送的链接中得到了这个想法

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

2 个答案: