如何在 GridView 中显示网格线答案

【问题标题】：How to display gridLines in GridView如何在 GridView 中显示网格线
【发布时间】：2014-06-17 18:37:06
【问题描述】：

由于某种原因，当我在 IE 或 Chrome 中打开 gridview 时，我的网格线没有显示。我已经将 gridLines 属性设置为 Both。

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

【问题讨论】：

这能回答你的问题吗？ grid lines are not displaying in grid view

标签： asp.net gridview gridlines

【解决方案1】：

设置GridLines 使用rules 属性呈现表格，这是旧的处理方式，不再支持。您现在想使用 css 来设置样式。这相当于您的示例：

  <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" 消除了rules 属性。设置 css border 属性定义了边框的外观。

将cellpadding 和cellspacing 设置为-1 会消除旧式表格属性。

使用标准padding 属性在th 和td 元素上定义填充。

间距是通过表格上的border-spacing 和border-collapse: separate 属性组合完成的。顺便说一句，这有点不寻常——大多数人使用border-collapse: collapse 并且没有边框间距。

ridge 边框样式似乎没有得到很好的支持。 IE 和 FF 这样做但不同。 Chome 只是把它画得很扎实。

您还可以通过为 RowStyle 等内容定义 css 类并设置适当的属性来将其他一些属性移动到样式表。

【讨论】：

【解决方案2】：

这很奇怪，但你可以尝试这样的事情为您的网格设置一个 CssClass

说

CssClass="网格"

并为其添加样式

 <style type="text/css"> 
       table.grid{ 
           border-collapse:collapse; 
           border:solid 2px black; 
        } 
        table.grid td, th{ 
           border:solid 2px black; 
        } 
    </style>

【讨论】：