cssを使用したasp：gridviewヘッダーの垂直方向の配置

debugcn 投稿 Dev

prkash

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>

prkash

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>

今私のテーブルはこのように見えます