Add a class to a th

Question

It's easy enough to add a class to a td in a webgrid, for example:

new WebGridColumn {
    ColumnName= "Owl.Species",
    Header= "Scientific Name",
    Style= "sci-name"
}

The style tag adds the class "sci-name" to the td. How can I add a class to the th for that column without using jQuery which wouldn't be the ideal solution.

score 1 · Answer 1 · answered Sep 03 '12 at 21:25

1

I don't think there's a built-in way to do it. You can't even extend the WebGrid classes, as their methods aren't marked virtual. The best way I can think of is to use some CSS, nth-child to target the th element by its index.

<style type='text/css'>
    table thead tr th:nth-child(2) {
        background: yellow;
    } 
</style>

Still not ideal, but I think better than using JQuery.

answered Sep 03 '12 at 21:25

McGarnagle

101,349
31
229
260

This is still the *best* way to handle what is a very obvious oversight on Microsoft's part. – Yuck Apr 23 '14 at 00:16

Govinda Rajbhar · Answer 2 · 2015-11-06T14:17:18.023

1

We can do this using of Javascript code as below, it is easiest way.

JsFiddle Example

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

edited Nov 06 '15 at 14:17

answered Nov 06 '15 at 14:01

Govinda Rajbhar

2,926
6
37
62

score 0 · Answer 3 · answered Sep 03 '12 at 14:19

0

You can use the headerStyle property of WebGrid.GetHtml Parameters for this

Eg:

enter image description here

Hope this helps!!!

answered Sep 03 '12 at 14:19

ssilas777

9,672
4
45
68

Add a class to a th

3 Answers3