Background color of 1 column header?

AndersHP

Im trying to set the background color of 1 specifik header. I cannot set the color in css, as the table size is dynamic, and the specific column index may vary.

So far im trying to change the color of all headers, but i cant make it work.. If i set the font-size attibute instead, the column widths adjusts, but the font size stays the same. As if there is another header behind it.

The code below runs, but does notting apparently.

 $("#farveknap").click(function () {
        var thx = $("#maintable").find('th');

        $.each(thx,function(i,j){
            $(this).css('background-color', 'red');
        });
    });

ThomD

if you are trying to change the color of a column with specific data in it, set the class in the ColumnDefs section. Then put th.className in your css file and you should be set.

If you are using something like Fixed Headers (older version) that might be cloning the base setup and then hiding any changes. Chrome Developer tools are good for inspecting the DOM.

AndersHP

Hi ThomD

I need to search the dom for the table header that contains text starting with "ReferenceTo" - this header needs to have another bg color.

Could you give an example of what you mean ? Im not using fixed headers.

regards

allan

Can you link to the page showing the issue please. I don't know why you would be able to set some aspects of the style and not others without being able to see the page. I would suggest using the browser's "Inspect element" option to tell you what is happening with the styles.

Allan

ThomD

If you are trying to set the column header color based on a specific data column, use this:

dtTable = $('#example').DataTable( {
    data: myData,
    columns: [
            { data: "Title", title:"Person Name" },   
        { data: "PositionTitle", title:"Position Title", className: "dt-specialColor" }
]

});

Once the class name is set, set the background color in your css file for "th.dt-sepecialColor".