Changing the font size, color, etc for a column

Hello.

In the Lite version we do not have the “Customize” section for DataTables connected to a data source,

which allows to have built-in font/color options, this is only available in the Premium version.

But you can still add custom CSS to change font, font size, and color to your tables in Lite Version.

Here is an example with my dummy table.

You can add one or more CSS classes to one or more columns, on this example i will add two separate classes,

one for text color , i name it “redtext”,  and the other class for font size “fontsize30”. We will add both classes to one of our column’s Display settings.

 Just add your class names with a space between them.

Then, we add this Custom CSS in main plugin settings/Custom JS and CSS/Custom CSS :

td.fontsize30 { 

? ? font-size: 30px !important;?
}?

td.redtext {?
color : red !important;
}

As a result, all cells from the column(s) which has these CSS classes, will apply the style as we set it, font size to 30 pixels, and text color to red.

If you simply wish to add the same font-size and text color to your entire table,

just use this CSS :

.wpdt-c .wpDataTablesWrapper table.wpDataTable tr td {  
?  font-size: 20px !important;   
?  color : red !important;
}
? .wpdt-c .wpDataTablesWrapper table.wpDataTable > thead > tr > th { 
?   font-size: 20px !important;    
?  color : red !important;
? }

You can of course, change the style properties as needed, rename your CSS classes, add other styles, etc.

This was an example for DataTables connected to source data, such as CSV/Excel and others;

but if you work with a Simple Table, they have built-in options to change colors and fonts for each cell, in the Lite Version, too.

I?hope that helps.?

Kind regards.

?

Brilliant. Thank you.

Hello. Just following up,
we are happy that this has helped.

Please don’t hesitate to create new Posts for any new questions and we will help.
Thank you.