Gridview and column name problem

Hi, I've got a gridview that displays about 6 columns, but when I view it, the rows seem to be out of step with the column names themselves.  I'll send a screenshot to show you what I mean.  It doesn't matter if I resize the window or anything, the column name seems to be a little ahead of the row

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="Blue" GridLines="None" 
        style="margin-right: 0px" Width="1000px">
        <RowStyle BackColor="#EFF3FB" />
            <asp:BoundField DataField="fileid" HeaderText="ID" 
                SortExpression="fileid" />
            <asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" />
            <asp:BoundField DataField="subtitle" HeaderText="Subtitle" 
                SortExpression="subtitle" />
            <asp:BoundField DataField="date" HeaderText="Date" 
                SortExpression="date" />
            <asp:BoundField DataField="filesize" HeaderText="File Size" 
                SortExpression="filesize" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#507CD1" BorderColor="#0033CC" Font-Bold="True" 
            ForeColor="White" />
        <EditRowStyle BackColor="#2461BF" />
        <AlternatingRowStyle BackColor="White" />

Open in new window

Who is Participating?
That is because the table header has its cells centered, while the fields in the rows are left-aligned. Either change the styles for the header cells, or for the rows.

Something like: <HeaderStyle TextAlign="Left" ....

Should do the job.
If you want to center all gridview you can put it inside a <div> and apply it a style like this

<div style="text-align:center">
your gridview here

Open in new window

Anurag ThakurTechnical ManagerCommented:
after modifying the line in the grid the titles row and the data row are left aligned
<HeaderStyle BackColor="#507CD1" BorderColor="#0033CC" Font-Bold="True" ForeColor="White" HorizontalAlign="Left"/>
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.