How align header on Web Grid in asp.net mvc

Question

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;

}

Hakan Fıstık · Accepted Answer · 2016-11-10 14:58:47Z

4

apply this:

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

edited Nov 10, 2016 at 14:58

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Feb 18, 2014 at 10:49

Asait

413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How align header on Web Grid in asp.net mvc

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related