2013-07-16 3 views
1

왼쪽에 정렬하려는 헤더가있는 gridview가 있습니다. 크롬에서는 작동하지만 IE 9에서는 왼쪽으로 정렬되지 않습니다. Gridview 헤더가 왼쪽으로 정렬되고 IE9에서는 작동하지 않지만 크롬에서는 작동합니다.

는 (나는 경우 일부 둘러싸여 사업부는이 문제의 책임, 전체 코드를 붙여 넣습니다.)

screenshot

 <div style="height: 300px; overflow: auto"> 
      <asp:GridView ID="myGrid" 
       AutoGenerateColumns="true" 
       runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%"> 
       <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
       <EditRowStyle BackColor="#999999" /> 
       <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
       <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" /> 
       <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 
       <RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left"/> 
       <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
       <SortedAscendingCellStyle BackColor="#E9E7E2" /> 
       <So![enter image description here][1]rtedAscendingHeaderStyle BackColor="#506C8C" /> 
       <SortedDescendingCellStyle BackColor="#FFFDF8" /> 
       <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> 
      </asp:GridView> 
     </div> 
     <div style="margin-top: 20px; margin-left: 550px"> 
      <asp:Button ID="btnClose" runat="server" Text="Close" /> 
     </div> 
     <div> 
      <asp:Label ID="lblError" runat="server" Text=""></asp:Label> 
     </div> 
    </div> 

갱신 1 : CSS

#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child{ 
    background-color:#eb8c00 !important; 
    color:#FFF !important; 
    } 
#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr:first-child td{ 
    text-align:left; 
    } 

#DeltaPlaceHolderMain #ctl00_PlaceHolderMain_myGrid tr{ 
    color:#404041 !important; 
    } 

답변

7

대신에 thAlign 속성을 넣어.

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" CssClass="headerClass" /> 

을 그리고 다음 스타일 선언한다 : 당신의 HeaderStyle에 'CssClass를'추가 무슨 일이 일어날 지,

/*Give a text-align left only to the gridview header th's*/ 
.headerClass > th 
{ 
    text-align:left; 
} 

가 조금 더 설명하기 HeaderStyle.CssClass이 포함 된 <tr>에 클래스를 줄 것이다 당신의 머리글. CSS 선택기 .headerClass > th은 해당 스타일을 헤더의 모든 하위 <th>에 적용하므로 각 머리글 셀에 왼쪽 텍스트 정렬을 적용합니다.

0

캔트 당신은 당신의 CSS에서

table th {text-align:left;}

을 넣어?

아니면 뭔가 빠졌습니까?

+0

어떻게 gridview, header 스타일 태그에서 할 수 있습니까? –

+0

너무 많은 자식 참조가있는 것을 좋아하지 않을 것입니다. 이것은 당신이 개요를 잃게하고 훨씬 더 까다 롭습니다. [멋진 CSS 기사] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS) – Tikkes

+0

디자이너가 넣은 CSS 클래스를 추가했는데 어쩌면 도움이 될까요? –

0

왼쪽을 tr에 정렬 할 수 없습니다.

td 또는 th 그러나 작동합니다.

나는 CSS 클래스 또는 CSS 파일의 th과 함께이 작업을 제안합니다.

.myLeftAlign { 
text-align: left; 
} 

또는

th { 
text-align: left; 
} 

당신이 CSS를 사용하지 않으려는 경우

는,이 작동하여 tr

+0

그것의 gridview, 자동으로 html 요소를 생성, 나는 gridview 태그 headerstyle./에 설정해야합니다. –

+0

방금 ​​CSS를 추가 한 클래스를 추가했습니다. –

관련 문제