How align header on Web Grid in asp.net mvc

asp.net, asp.net-mvc, css, html

Solution

apply this:

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

Problem

I am having `WEBGRID` with nine columns,In this i need to `text-align Right` for Money fields and `text-align center` for other fields.When i try to align columns its was aligned,and the `header` not aligned properly, how to align the header of particular `Column` based on column alignments. ``` <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> ``` Style: Header ``` .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; } ``` Column ``` .Curency { text-align: right; width: 80px; border: rgba(250, 38, 38, 0); border-right-style: solid; border-right-width: 10px; } ```

Original source