MVC3 WebGrid Formatting or Styling Column Headers

Question

I'm using the new MVC3 WebGrid. So far so good, just having issues styling/formatting the column headers. The best I've got is a workaround that applies the same css class from the first row of the WebGrid to the table header.

var headerCells = $("#grid tr:eq(0) th");
var firstRowCells = $("#grid tr:eq(1) td");

$.each(firstRowCells, function (index, value) {
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});

This example obviously lacks a check to make sure there are rows or indeed the specifed element id, but it applies the css class from the first row to the header row meaning you can style independently of each other.

td.my-column-style { width:100px }
th.my-column-style { text-align:right;}

Is there a built in way of styling the column header elements (not just using the headerStyle property)?

Answer 1

We can do this using of Javascript code as below.

JsFiddle Example

$("table tr th:nth-child(n)").addClass("col-md-1");

Answer 2

No, as of now there is no built-in way to style the header cells independently, only the header row via the headerStyle property.

I think your workaround is good enough.

Answer 3

I know this is an old question, but this may be useful to viewers who stumble across it. The :nth-child css pseudo selector is your friend, if you don't want to rely on javascript to copy the classes. It is easy to add a class to your webgrid using the tableStyle property, and then you can style the individual headers with the following bit of css:

.webgridclass tr th:nth-child(1){
    background:#ff0;
}

.webgridclass tr th:nth-child(2){
    background:#f60;
}

Unfortunately, this is not supported in IE8 and earlier IE, but it does have full support in all proper browsers (newer than FF3).