GridViewのページ番号が離れた別の列に表示されます

Question

私は以下のようにgridviewを使用しています。どういうわけか、ページ番号は別々の列に表示されます。私はそれらを中央に一緒に表示したい。ページ番号を中央に集めるにはどうすればいいですか？

<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; 
} 

gridViewPagerのこの

Answer 1

あなたのCSSクラスは、テーブル幅に対するページ数の要素をサイジングすることができると同じように。

特に、width: 100%;に関しては、gridViewPagerを確認してください。

Answer 2

GridViewのページャはネストしたテーブルです。だからおそらく親要素から100%のwidthプロパティを継承しています。

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" />