Change the data table's certain column's header color or background

Normally, for a Data Table control, you can set the custom style of table’s header from the style tab.

By changing the settings here, you can set the styles like background color, text color or border etc. Those settings will affect to all columns of the header.

Something, you might want to change certain columns’ style by adding a different background/text color. Although there are no such custom settings on the normal settings panel, you can still do adding those styles by leveraging the custom CSS feature. Here’s how to do:

From your data table control, go to the advanced tab, and from the advanced panel, set a CSS ID for this data table (cus_header for example).

Next, go to the Custom CSS settings panel, and paste the following css style into the text area:

#cus_header thead th:nth-child(3)
background: #000;
color: #fff;

This will change the third column’s background color to black, and the text color to white.

You can change the number from 3 to others to change the related styles of the certain column.