html - 将 CSS 类应用于 gridview 不起作用

Question

我在 HTML 中有一个表结构，我想将其转换为具有适当 CSS 类和设计的 Gridview。

但是当我将它转换成我的 gridview 并应用 CSS 类时，gridview 的 boundfield 不采用 CSS。请查看 HTML 代码和我的 gridview。

Gridview 的 HTML

<table width="100%" border="1" style="border: 1px solid #E5E5E5;" cellpadding="0" cellspacing="0" class="hoverTable">

            <tr>
                <td class="k-grid td">Page Title</td>
                <td class="k-grid td">Page Description</td>

                <td class="k-grid td">Meta Keywords</td>
                <td class="k-grid td">Meta Description</td>
                <td class="k-grid td">Active</td>
                <td class="k-grid td">
              Action
                </td>
            </tr>

             <tr>
                <td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Title"></td>
                <td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Description"></td>

                <td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Meta Keywords"></td>
                <td class="k-grid td"><input type="text" class="form-control" name="" id="" value="" placeholder="Meta Description"></td>
                 <td class="k-grid td">
                    <select class="selectpicker form-control-drp wd" style="width: 100%">
                            <option role="option" value="10">Active</option>
                            <option role="option" value="20" selected="selected">Inctive</option>
                    </select>
                 </td>
                <td class="k-grid td">
              &nbsp;
                </td>
            </tr>

             <tr>
                <td class="k-grid ">Page Title</td>
                <td class="k-grid ">Page Description</td>

                <td class="k-grid ">Meta Keywords</td>
                <td class="k-grid">Meta Description</td>
                <td class="k-grid">Active</td>
                <td class="k-grid" width='7%'>
                   <a class=" k-button-icontext k-grid-edit"  href="#" title="Edit this row"><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></a>
                   <a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png"  width="15" height="15"/> </a>

                </td>
            </tr>

            <tr class="k-alt ui-state-highlight">
                 <td class="k-grid ">Page Title</td>
                <td class="k-grid ">Page Description</td>

                <td class="k-grid ">Meta Keywords</td>
                <td class="k-grid">Meta Description</td>
                <td class="k-grid">Active</td>
                <td class="k-grid">
                    <a class=" k-button-icontext k-grid-edit"  href="#" title="Edit this row"><span><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></span></a>
                   <a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png"  width="15" height="15"/> </a>

                </td> 
            </tr>

            <tr>
                 <td class="k-grid ">Page Title</td>
                <td class="k-grid ">Page Description</td>

                <td class="k-grid ">Meta Keywords</td>
                <td class="k-grid">Meta Description</td>
                <td class="k-grid">Active</td>
                <td class="k-grid">
                    <a class=" k-button-icontext k-grid-edit"  href="#" title="Edit this row"><span><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></span></a>
                   <a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png"  width="15" height="15"/> </a>

                </td>
            </tr>

            <tr class="k-alt">
                  <td class="k-grid ">Page Title</td>
                <td class="k-grid ">Page Description</td>

                <td class="k-grid ">Meta Keywords</td>
                <td class="k-grid">Meta Description</td>
                <td class="k-grid">Active</td>
                <td class="k-grid">
                    <a class=" k-button-icontext k-grid-edit"  href="#" title="Edit this row"><span><img src="images/edit.png" class="img-hvr1" width="15" height="15"/></span></a>
                   <a class="k-button-icontext k-grid-delete" href="#" title="Delete this row"><img src="images/delete.png"  width="15" height="15"/> </a>

                </td>
            </tr>

             <tr class="k-grid td">
                 <td colspan="9" class="k-grid td">
                     <table width="100%" cellspacing="0" cellpadding="0" border="0" class="hoverTable_tbl">
                         <tr>
                             <td>
                                 <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                     <tr>

                                         <td>
                                     <center>
                                          <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                             <tbody><tr>

                                                     <td class="txtpara"><button type="button" class="btn btn-default" id="prv-nxt">&lt;&lt;</button> &nbsp; Page &nbsp;<input class="ui-pg-input form-control-page" type="text" size="2" maxlength="7" value="0" role="textbox">&nbsp; of &nbsp;5 &nbsp; &nbsp;<button type="button" class="btn btn-default" id="prv-nxt">&gt;&gt;</button></td>

                                                     <td>
                                                         <select class="selectpicker form-control-drp" role="listbox"><option role="option" value="10">10</option><option role="option" value="20" selected="selected">20</option><option role="option" value="30">30</option><option role="option" value="99999">All</option></select></td>
                                                 </tr>
                                             </tbody></table>
                                          </center>
                                         </td>

                                         <td>
                                              <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                                 <tbody><tr>
                                                     <td class="txtpara-right">View 1 - 20 of 88</td>
                                                 </tr>
                                             </tbody></table>
                                         </td>
                                     </tr>
                                 </table>
                             </td>
                         </tr>
                     </table>
                 </td>
            </tr>
        </table>

当我同样适用于 gridview boundfield 它不起作用，请大家帮忙

在 gridview 上应用 HTML:-

 <asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
            AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found"
            OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting"
            PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating"
            OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
            <AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" />
            <Columns>
                <asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
                <asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td">
                    <ItemTemplate>
                        <asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">
                    <ControlStyle Height="20px" Width="20px"></ControlStyle>
                </asp:CommandField>
            </Columns>
        </asp:GridView>

查看您的引用图片:-

1)HTML表格gridview:-

2在实际的gridview中转换:-

Answer 1

而不是 CssClass 属性尝试仅使用 css 来分配类。

例如

<asp:GridView ID="grdCSRPageData" runat="server" class="hoverTable" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
            AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" EmptyDataText="No Records Found"
            OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting"
            PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating"
            OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
  </asp:GridView