GridView에 gridLine을 표시하는 방법

Question

IE 또는 Chrome에서 gridview를 열면 어떤 이유로 그리드 선이 표시되지 않습니다. gridLines 속성을 Both로 설정했습니다. 이상한하지만 당신은 당신의 눈금이 설정 CssClass 뭔가를 시도 할 수 있습니다

<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

말

CssClass = "그리드"

과 스타일을 추가 그것에

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

Answer 2

설정 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이고 테두리 간격은 없습니다.

테두리 스타일을 잘 지원하지 않는 것 같습니다. IE와 FF는 다르게합니다. 쵸메는 그것을 단단하게 그립니다.

RowStyle 등의 CSS 클래스를 정의하고 적절한 속성을 설정하여 다른 속성의 일부를 스타일 시트로 옮길 수도 있습니다.