Please wait...

Coloring and styling columns

Video versionA video overview of coloring and styling columns in wpDataTables

wpDataTable Coloring and styling columns

For coloring rows, make sure that you first check how to use conditional formatting (highlighting) in this documentation section.

For changing the general design look and feel of the table elements check the plugin configuration page.

By default each column in wpDataTables has same CSS classes applied and has a same look, but you can always style and color the columns as you need.

Sometimes it is handy to have right-align for numeric columns, especially if you have large numbers in your table. This feature is supported out-of-the-box – to enable it you’d just need to tick the “Align numbers to the right” checkbox in the wpDataTables settings page – then all of the numbers in all tables will be right-aligned.

Coloring columns is also very simple – there is a color picker in each column settings block:

Just pick the color that you want in the datepicker, save the table, and you will see the columsn colored in the table front-end:

Fruit consumption table

1 John 3 7 2
2 Paul 6 2 3
3 George 2 6 2
4 Ringo 5 3 8

Styling columns

Sometimes it’s not only the color that you would like to change – it’s necessary to apply some specific styling rules for some of the columns – e.g. different font, margins, etc. For this there is a ‘CSS class(es)‘ input in each column block, you can define one or more CSS classes there, separated with a space:

Then you can define any specific CSS rules for the columns, either in theme’s CSS (whether in files or theme settings), page CSS (e.g. if you’re using Visual Constructor), or wpDataTables Custom CSS block in the Settings page:

Then when you insert this table in the front-end you will see the styling applied:

Custom CSS classes demo

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.