Question

I'm using the DataTables plugin, and on certain columns I have set "bSortable": false. On those same columns I would like to remove the text underline and cursor pointer from the column header as well.

I created a class called removeFormat which I would like to apply to JUST the column headers.

.removeFormat {
  text-decoration: none;
  cursor: auto;
}

How can I do so??

I was hoping I could use something like sClass. Unfortunately, that only adds the classes to the table cells.

If creating a CSS class and adding it to the column header is not the right direction I should go in, is there a standard method which DataTables has which I can use for this specific purpose?

UPDATE:

I'd like to add a function directly to the column I am interested in changing. For instance:

           {
                "mData": null,
                "sWidth": "5%",
                "bSortable": false,
                "sClass": "alignCenter"
            }
Was it helpful?

Solution

I found the answer after playing around with it a bit.

In my case the sClass applied the class to both the table cells and the table header. So I just needed to add the class to the list:

"sClass": "alignCenter removeFormat"

I also just made sure that my class was specific enough that it applied to only the table headers and it applied to the element on hover:

th.removeFormat div:hover {}

That fixed it!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top