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

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 表内。感谢您的宝贵时间，谢谢!

Answer 1

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

结果:

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