GridView Header not lining up with Rows

Question

I have a GridView and I am binding data to this grid without any issues. What I am having trouble with is getting the header to match up with the row in the grid.

<asp:GridView ID="gvMyGrid" runat="server" 
            AutoGenerateColumns="False" BackColor="White" 
            BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
            ForeColor="Black" GridLines="Vertical">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <table>
                            <tr>
                                <td>
                                    Date    
                                </td>
                                <td>
                                    Merchant
                                </td>
                                <td>
                                    Description
                                </td>
                                <td>
                                    Amount
                                </td>
                                <td>
                                    Status
                                </td>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="lblTransactionDate" runat="server" Text='<%# String.Format("{0:MM/dd/yyyy}", Convert.ToDateTime(Eval("transactionDate"))) %>'></asp:Label>            
                                </td>
                                <td>
                                    <asp:Label ID="lblAcceptLocation" runat="server" Text='<%# Eval("acceptLocation").ToString() %>'></asp:Label>            
                                </td>
                                <td>
                                    <asp:TextBox ID="tbItemDescription" runat="server"></asp:TextBox>            
                                </td>
                                <td>
                                    <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("preAuthAmount") %>'></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("transactionStatus") %>'></asp:Label>            
                                </td>
                                <td>
                                    <asp:LinkButton ID="LinkButton1" runat="server" Text="Assign +" OnClick="BtnAssign"></asp:LinkButton>   
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
        </asp:GridView>

The alignment of the header is all pushed together. I could put spaces in but I would rather make this look nice and I'm not sure what I am doing wrong. If I use the Repeater everything looks GREAT but that is not an option for me. I need to be able to click on the assign button and get the clicked row and values in that row.

Answer 1

You are putting your grid together wrong. You are defining separate tables inside the header and each row, not to mention stuffing all your fields into a single column.

<asp:GridView ID="gvMyGrid" runat="server"
    AutoGenerateColumns="False" BackColor="White"
    BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4"
    ForeColor="Black" GridLines="Vertical">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>Date</HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="lblTransactionDate" runat="server" Text='<%# String.Format("{0:MM/dd/yyyy}", Convert.ToDateTime(Eval("transactionDate"))) %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>Merchant</HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAcceptLocation" runat="server" Text='<%# Eval("acceptLocation").ToString() %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>Description</HeaderTemplate>
            <ItemTemplate>
                <asp:TextBox ID="tbItemDescription" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>Amount</HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("preAuthAmount") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>Status</HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("transactionStatus") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" Text="Assign +" OnClick="BtnAssign"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCC99" />
    <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#F7F7DE" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <sortedascendingcellstyle backcolor="#FBFBF2" />
    <sortedascendingheaderstyle backcolor="#848384" />
    <sorteddescendingcellstyle backcolor="#EAEAD3" />
    <sorteddescendingheaderstyle backcolor="#575357" />
</asp:GridView>