Aligning WebGrid headers ASP.net MVC

Question

I need to set the text alignment for individual column headers in the ASP.net WebGrid. Found this, MVC3 WebGrid header alignment and various other people asking the same question, but no real satisfactory answer.

Not really up for replacing it with another grid unless it looks EXACTLY the same, takes the same parameters etc. Already been through another grid and made it work but the pagination UI controls were different and there was no control over the footer style, or cell style

Up for inheriting from WebGrid and rolling my own - but I am not a CSS/HTML expert AT ALL. IS there an easy way?

Helpful. The issue with the WebGrid is that the does not allow you apply any styling that affects the headers on a column-by-column basis - as anyone familiar with it would know. It's easy enough to apply the same style to all the column headers, but that's not the problem at hand. I said I wasn't an expert - I didn't say I was entirely ignorant. — kpollock
– kpollock, Commented Apr 17, 2014 at 8:04
Fair enough. I hope the reply I made below is more helpful to you. — Mike Brind
– Mike Brind, Commented Apr 17, 2014 at 13:59

Mike Brind · Accepted Answer · 2014-04-17 14:10:38Z

1

You can do what you want via the CSS3 psuedo selector :nth-child. The following will style the 2nd column heading only:

th:nth-child(2){
    color:red;
}

It's not supported in IE 8 so if that is important to you, you can use jQuery to apply the style instead:

$(function () {
    $('th:nth-child(2)').css('color', 'red');
});

edited Apr 17, 2014 at 14:10

answered Apr 17, 2014 at 13:59

Mike Brind

30.3k6 gold badges65 silver badges95 bronze badges

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

1 Comment

kpollock Over a year ago

I was trying for a general solution that could be applied to any column, on any grid, on any page. I did come up with my own way...

kpollock · Accepted Answer · 2014-04-17 14:51:04Z

1

In the end, because I wanted this behaviour for any column in any grid in the web app (and because I am very comfortable with C# and reflection) I sub-classed WebGrid and created our own version which does allow styles to be specified when the grid is set up.

Because of how WebGrid is written, it did involve pulling out a couple of the private methods via a disassembler, so it may not be to everyone's taste, but I now have exactly what I wanted.

answered Apr 17, 2014 at 14:51

kpollock

3,9999 gold badges45 silver badges67 bronze badges

1 Comment

Mike Brind Over a year ago

For future reference, the source code for the WebGrid is available here: aspnetwebstack.codeplex.com/SourceControl/latest#src/…. Saves having to use Reflector or similar...

Collectives™ on Stack Overflow

Aligning WebGrid headers ASP.net MVC

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related