Hello fangquans

Unfortunately, there isn't any documentation with detailed instructions on how you can do this, but if what you're looking for isn't found in "Settings/Color and font settings", you can do it with custom CSS.

For example, you can add a Custom CSS Class to the column, which is meant to call on a class which you would define in Custom CSS field in main settings of wpDataTables.

So, if you were to name the class "color1", you should go to main settings/Custom JS and CSS/Cusom CSS, and enter this:

table.wpDataTable td.color1 {
color: red !important;
}

For table headers, you can find the column name in the column settings:

Then add the following CSS:

.wpdt-c th.column-product {
background-color: red !important;
}

My test table has columns "Name", "Product", "Date" and "Image", so my CSS would look like this:

.wpdt-c th.column-name {
background-color: gray !important;
}
.wpdt-c th.column-product {
background-color: red !important;
}
.wpdt-c th.column-date {
background-color: blue !important;
}
.wpdt-c th.column-image {
background-color: wheat !important;
}

And the outcome would be:

If you want to apply this to all tables, you can paste the CSS in Custom CSS field in Custom JS and CSS tab in main settings of wpDataTables. If, however, you wish to apply this only to a certain table on front-end, you need to add it when you're creating the page, above the shortcode, in between the <style>...</style> tags, like this:

<style>
.wpdt-c th.column-name {
background-color: gray !important;
}
.wpdt-c th.column-product {
background-color: red !important;
}
.wpdt-c th.column-date {
background-color: blue !important;
}
.wpdt-c th.column-image {
background-color: wheat !important;
}
</style>
[wpdatatable id=1]

Of course, you can add "color" instead of "backgroung-color" if you wish to change the font color.

I hope this helps.

Hi again fangquans

You can use the same class you used for the color.

For example:

table.wpDataTable td.color1 {
color: red !important;
text-align: center !important;
}