MVC3 WebGrid Formateo o estilo de encabezados de columnas

Question

Estoy usando el nuevo MVC3 WebGrid. Hasta ahora todo bien, solo tengo problemas para diseñar/estilizar los encabezados de las columnas. Lo mejor que tengo es una solución que aplica la misma clase css desde la primera fila de WebGrid al encabezado de la tabla.

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")); 
}); 

En este ejemplo, obviamente, carece de una comprobación para asegurarse de que no son filas o de hecho el specifed Identificación del elemento, pero se aplica la clase css desde la primera fila a la fila de cabecera lo que significa que puede estilo de forma independiente entre sí.

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

¿Hay una construida en forma de estilizar los elementos de encabezado de columna (no sólo mediante la propiedad headerStyle)?

Answer 1

No, a partir de ahora no hay una forma incorporada de diseñar las celdas de encabezado de forma independiente, solo la fila de encabezado mediante la propiedad headerStyle.

Creo que su solución es lo suficientemente buena.

Answer 2

Sé que esta es una pregunta antigua, pero puede ser útil para los espectadores que se topan con ella. El pseudo selector css de nth-child es tu amigo, si no quieres confiar en javascript para copiar las clases. Es fácil añadir una clase a su WebGrid utilizando la propiedad TableStyle, y luego puede estilo de las cabeceras individuales con la siguiente poco de css:

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

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

Por desgracia, este no es compatible con Internet Explorer 8 y versiones anteriores de IE, pero tiene soporte completo en todos los navegadores adecuados (más nuevos que FF3).

Answer 3

Podemos hacerlo utilizando el código Javascript como se muestra a continuación.

JsFiddle Example

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