如何删除表格的这一部分？

Question

我正在使用ASP.NET中的分页功能，我希望完全摆脱该表。我浏览了一下，发现有人说不可能创建一个自定义的分页系统来起诉gridview，而其他人则说这是先进的。由于我是ASP.NET的新手，无论哪种方式都可以，但最好的方法是将它设置为 NOT 看起来像CSS中的表格。

以下是我的gridview中的分页。我已经标记了我想删除的内容。绿色框内的内容是分页表，带有箭头的深灰色框是我希望删除的部分。

这是gridview;

<asp:GridView ID="grdFAQ" runat="server" AllowPaging="True" 
    AutoGenerateColumns="False" CellPadding="4" DataKeyNames="FAQ_Id" 
    DataSourceID="oGetAllFAQs" ForeColor="#333333" GridLines="None" 
    PageSize="50" onrowdeleted="grdFAQ_RowDeleted" AllowSorting="True" 
        onpageindexchanged="grdFAQ_PageIndexChanged" 
        onpageindexchanging="grdFAQ_PageIndexChanging" onsorting="grdFAQ_Sorting">
    <RowStyle BackColor="#f2f2f2" ForeColor="#333333" />
    <Columns>

        <asp:TemplateField SortExpression="FAQ_Highlight">
            <ItemTemplate>
                <asp:Image ID="imgHighlighted" runat="server" AlternateText="Highlighted (Show on front page)" 
                    ImageUrl="~/Images/flag_yellow.png"
                    Visible='<%# Eval("FAQ_Highlight") %>' />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField SortExpression="FAQ_Important">
            <ItemTemplate>
                <asp:Image ID="imgImportant" runat="server" AlternateText="Important" 
                    ImageUrl="~/Images/information.png"
                    Visible='<%# Eval("FAQ_Important") %>' />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:HyperLinkField DataNavigateUrlFields="FAQ_Id" DataTextField="FAQ_FromDate"
            SortExpression="FAQ_FromDate" HeaderText="Date" DataTextFormatString="{0:d}"
            DataNavigateUrlFormatString="~/Administration/FAQEditor.aspx?FAQ_Id={0}" 
            Text=""  >
         <ControlStyle Width="75px" />
        <ItemStyle CssClass="UI_medium" />
        </asp:HyperLinkField>

        <asp:HyperLinkField DataNavigateUrlFields="FAQ_Id" DataTextField="FAD_Question"
            SortExpression="FAD_Question" HeaderText="Question"
            DataNavigateUrlFormatString="~/Administration/FAQEditor.aspx?FAQ_Id={0}" 
            Text="" >
        <ItemStyle CssClass="UI_medium" />
        </asp:HyperLinkField>

        <asp:HyperLinkField DataNavigateUrlFields="FAQ_Id" DataTextField="FAD_Question_Secondary"
            SortExpression="FAD_Question_Secondary" HeaderText="Secondary language"
            DataNavigateUrlFormatString="~/Administration/FAQEditor.aspx?FAQ_Id={0}" 
            Text="" >
        <ItemStyle CssClass="UI_medium" />
        </asp:HyperLinkField>

        <asp:CommandField ShowDeleteButton="True" ButtonType="Image" 
             DeleteImageUrl="~/Images/table_row_delete.png" Visible="false">
            <ItemStyle Font-Names="Segoe UI" Font-Size="X-Small" />
        </asp:CommandField>

        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="btnDelete" runat="server" AlternateText="Delete"
                    ImageUrl="~/Images/table_row_delete.png" OnClick="btnDelete_Click"
                    CommandName="FAQ_Id" CommandArgument='<%# Eval("FAQ_Id") %>' ToolTip="Delete" />
            </ItemTemplate> 
        </asp:TemplateField>

    </Columns>
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#dedede" ForeColor="#000000" HorizontalAlign="Center" CssClass="pager" />
    <EmptyDataTemplate>
        <asp:Label ID="lblEmpty" runat="server" 
            Text="Tomt! Välj ett språk.."></asp:Label>
    </EmptyDataTemplate>
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" Font-Names="Segoe UI" 
        ForeColor="White" Font-Size="Small" />
    <EditRowStyle BackColor="#999999" />
    <AlternatingRowStyle BackColor="#f7f6f3" ForeColor="#000000" />
</asp:GridView>

这是类分页器和所有与表相关的CSS的样式;

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

table { border-collapse: separate; border-spacing: 0; }

table {
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 20px;
    width:100%;
}

.pager table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}

.pager th, td {
    /*border: none;*/
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    padding-left: 2px;
    padding-right: 2px;
}


.pager:hover td {
    background-color: #f7f6f3;
}

以下是查看页面时分页表的HTML源代码;

<tr class="pager" align="center" style="color:Black;background-color:#DEDEDE;">
<td colspan="6">
    <table border="0">
    <tr>
        <td>
        <span>1</span>
        </td>
        <td>
        <a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdFAQ&#39;,&#39;Page$2&#39;)" style="color:Black;">2</a>
        </td>
    </tr>
    </table>
</td>
</tr>

正如您在上面的HTML代码中所看到的，分页表位于gridview-table中。感谢您的时间，谢谢！

Answer 1

将margin-bottom: 0px;添加到表格CSS。

结果：

table {
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 0px;
    width:100%;
}