GridView 页码出现在相隔很远的单独列中

Question

我正在使用如下的网格视图。不知何故，页码出现在单独的列中。我希望他们一起出现在中心。如何将页码放在中间？

 <asp:GridView ID="GridView1" runat="server" Width="100%" OnRowCommand="GridView1_RowCommand" CssClass="GridStyle" AllowPaging="true" AllowSorting="True" AutoGenerateColumns="False" BorderColor="Black" OnPageIndexChanging="GridView1_PageIndexChanging"> 

 <PagerStyle Font-Underline="false" BorderColor="White" BorderStyle="None" BorderWidth="0"  />

CSS

.GridStyle {
table-layout: auto;
border: 1px solid black;
background-color: White;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
/*border-collapse: collapse;
margin-bottom: 0px;*/
}

.GridStyle tr {
    border: 1px solid black;
    color: black;
    background-color: #E5E4F2;
    height: 25px;
}


.GridStyle th {
    background-color: white;
    border: none;
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    padding: 4px;
    color: black;
}


.GridStyle tr th a, .GridStyle tr th a:visited {
    color: red;
}

.GridStyle tr th, .GridStyle tr td table tr td {
    color: #484585;
    border: 1px solid black;
}

.GridStyle td {
    border-bottom: 1px solid black;
    padding: 2px;
}

像这样

Answer 1

您的 gridViewPager 的 CSS 类可能会根据表格宽度调整页码元素的大小。

查看 gridViewPager，特别是关于任何

width: 100%;

。

Answer 2

GridView 中的分页器是一个嵌套表。所以它可能从父元素继承了

100%

宽度属性。

在 HTML 中，分页器看起来像这样。

<tr>
    <td colspan="8">
        <table>
            <tr>
                <td><span>1</span></td>
                <td><a href="javascript:__doPostBack(&#39;ctl00$mainContentPane$GridView1&#39;,&#39;Page$2&#39;)">2</a></td>
                <td><a href="javascript:__doPostBack(&#39;ctl00$mainContentPane$GridView1&#39;,&#39;Page$3&#39;)">3</a></td>
            </tr>
        </table>
    </td>
</tr>

您可以修复继承或为寻呼机提供自己的类。

<PagerStyle CssClass="pagerCssClass" Font-Underline="false" BorderColor="White" BorderStyle="None" BorderWidth="0" />