Please wait...

Coloring and styling columns

Video versionA video overview of coloring and styling columns in wpDataTables

Basic column stylingHow to define general styling rules

wpDataTables column styling

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.

Individual coloring and styling columnsHow to define specific colors and styles for individual columns

“Coloring columns” is also very simple – there is a color picker in each column settings panel. Just pick the color that you want in the colorpicker, save the table, and you will see the columns colored in the table front-end.

wpDataTables column styling
wdt_ID Name Apples Oranges Bananas
1 John 3 7 2
2 Paul 6 2 3
3 George 2 6 2
4 Ringo 5 3 8
Name Apples Oranges Bananas

You can see at this table on the left that we applied three different colors for each type of fruit. For “Apple” column we set green color, “Oranges” orange color and for “Bananas” the yellow one.

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 for each column. You can define one or more CSS classes there, separated with a space. You can enter column configuration by clicking on “Column settings” button wpDataTables column settings or by clicking “Complete column list”  button wpDataTables complete column list from where you can open column configuration for each column.

wpDataTables Column Custom CSS class

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.

wdt_ID Name Apples Oranges Bananas
1 John 3 7 2
2 Paul 6 2 3
3 George 2 6 2
4 Ringo 5 3 8
Name Apples Oranges Bananas

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.