Changing Table Header Color

In this article you will learn about how to change Table Header color of Tabular Report created via Adhoc. By default the header of a Tabular report is white. In order to customize the Table header color, you can do it by adding either CSS or Javascript Code.

To apply CSS style, Go to Custom Tab click on Styles to enter the code then click on Apply to execute the entered code

CSS Code :

.table > thead > tr > th{
background-color: plum;      //color name is customizable
}

Output :

Also, you can use color name or its hex code and can customize the table header color accordingly.

CSS Code :

.table > thead > tr > th{
background-color: #EEEE00;
}

Output :

Previously, we have achieved the output through CSS Style and the same output can be achieved through Javascript Code. To execute Javascript code, go to Custom Tab,  click on Script,  click on Add to enter the code then click on Inject to execute the entered code

Javascript Code:

hi_container.set("postExecution", function () {
$('th').css({"background-color": "plum"});  // color name is customizable, 
});                                         // you can also use hexcode #8E4585

Output :

You can either mention the name of the color or its hex code and can customize the table header color accordingly.  Also, you can add more customizations using CSS and Javascript code. Please refer our table customization articles.

For more info, contact us at support@helicalinsight.com