How to display gridLines in GridView

Question

For some reason my grid lines are not showing when I open the gridview in IE or Chrome. I set the gridLines property to Both already.

<asp:GridView ID="GridView1" runat="server"  OnSelectedIndexChanged="GridView1_SelectedIndexChanged" BorderColor="Black" AutoGenerateColumns="True" Height="350px" ShowFooter="True" AllowSorting="True" BackColor="Black" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="3" GridLines ="Both">


        <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />


        <HeaderStyle Font-Size="7pt" Width="400px" BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" >
        </HeaderStyle>


        <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
        <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
        <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F1F1F1" />
        <SortedAscendingHeaderStyle BackColor="#594B9C" />
        <SortedDescendingCellStyle BackColor="#CAC9C9" />
        <SortedDescendingHeaderStyle BackColor="#33276A" />


    </asp:GridView>

Answer 1

Setting GridLines renders the table with the rules attribute, which is the old way of doing things and no longer supported. You want to use css for styling things now. This is equivalent to your sample:

  <style type="text/css">
    .GridView1 { border-spacing: 3px; border-collapse: separate; }
    .GridView1 > tbody > tr > th, 
    .GridView1 > tbody > tr > td { border: 2px ridge black; padding: 3px; }
  </style>

  <asp:GridView ID="GridView1" runat="server" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" ShowFooter="True" AllowSorting="True" AutoGenerateColumns="True"
    Height="350px" BackColor="Black" 
    CssClass="GridView1" GridLines="none" CellPadding="-1" CellSpacing="-1">
    <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
    <HeaderStyle Font-Size="7pt" Width="400px" BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF"></HeaderStyle>
    <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
    <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#594B9C" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#33276A" />
  </asp:GridView>

GridLines="none" eliminates the rules attribute. Setting the css border property defines how your borders look.

Setting cellpadding and cellspacing to -1 eliminates the old-style table attributes.

Padding is defined on the th and td elements with the standard padding property.

Spacing is done with the combination border-spacing and border-collapse: separate properties on the table proper. This is kind of unusual btw- most people go with border-collapse: collapse and no border spacing.

The ridge border style seems to be not well supported. IE and FF do it but differently. Chome just draws it solid.

You can move some of the other attributes to the stylesheet as well by defining css class for things like RowStyle and setting the appropriate properties.