2013-11-21 2 views
3

에서 웹 격자에 머리글을 정렬하는 방법 9 개의 열을 가진 및 기타 필드의 경우 text-align center이 필요합니다.이 열을 정렬하려고하면 header 제대로 맞춰지지 않았으며, 열 정렬을 기반으로 특정 헤더 Column을 정렬하는 방법.asp.net mvc

<div id="gridContent"> 
    @grid.GetHtml(
    tableStyle: "webgrid-table", 
    headerStyle: "webgrid-header", 
    footerStyle: "webgrid-footer", 
    alternatingRowStyle: "webgrid-alternating-row", 
    selectedRowStyle: "webgrid-selected-row", 
    rowStyle: "webgrid-row-style", 
     columns: grid.Columns(
          grid.Column("Cust_Name", "Customer Name", style:"Custname"), 
          grid.Column("SalesDatestr", "Sales Date",style: "name"), 
          grid.Column("TotalAmount", "Total Amount", style:"Curency"), 
          grid.Column("Pay_Amount", "Paid Amount", style:" width: 64px; text-align: right; margin-right: 174px; border-right-style: solid; border-right-width: 29px; "), 
          grid.Column("Pay_Mode", "Paid Mode", style: "name"), 
          grid.Column("Bank_Name", "Bank Name", style: "name"), 
          grid.Column("Bank_Address", "Bank Address", style: "name"), 
          grid.Column("ChequeNo", "ChequeNo", style: "name"), 
          grid.Column("Cheque_Datestr", "Cheque Date", style: "name")                    
            ) 
           ) 
</div> 

스타일 :

헤더

.webgrid-header td, th 
{ 
    background-color: #72AAD3; /*#D3D3D3; color: #6D70B5;*/ 
    padding-bottom: 4px; 
    padding-top: 5px; 
    text-align: left; 
    border-bottom: 1px solid white; 
    border-top: 1px solid white; 
    margin-bottom: 2px; 
    padding: 0px 5px; 
    text-align: right; 
    height: 22px; 
    color: white; 
    font-weight: bold; 
} 

.Curency 
{ 
text-align: right; 
width: 80px; 
border: rgba(250, 38, 38, 0); 
border-right-style: solid; 
border-right-width: 10px; 

} 

답변

3

이 적용 :

<style type="text/css"> 
    tr.webgrid-row-style td:nth-child(4) 
    { 
     text-align: right; 
    } 
</style>