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

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.