company logo

Help center

Go to wpDataTables
YouTube Channel
All collectionsFAQStyling and CSSHow to Center Content in wpDataTables

How to Center Content in wpDataTables

Apply custom CSS to center table cells, headers, or specific columns in your tables.

You can center cell data, headers, or individual columns using custom CSS. Here’s how:


🛠 1. Center all content in a specific table (cells + headers)

Go to the table’s settings and add the following CSS under:
Customize → Custom CSS

JavaScript
.wpDataTablesWrapper table.wpDataTable td.numdata,
.wpDataTablesWrapper table.wpDataTable th.numdata {
  text-align: center !important;
}

.wpDataTablesWrapper table.wpDataTable > thead > tr > th {
  text-align: center !important;
}

.wpDataTablesWrapper table.wpDataTable td {
  text-align: center !important;
}

2. Apply center alignment globally to all tables

To apply the same styling across all tables, paste the CSS under:
Main Plugin Settings → Custom JS and CSS → Custom CSS


3. Center only specific columns

  • Go to the Column Settings → Display

  • Assign a custom class (e.g., center) to the desired column(s)

Then add the following CSS in the table’s Customize → Custom CSS section:

JavaScript
td.center {
  text-align: center !important;
}
th.center {
  text-align: center !important;
}

You can change the class name from center to anything you like — just match it in both the column settings and the CSS.


🔧 Need to add CSS directly to the page?

If you prefer to add the CSS outside of wpDataTables, here’s a guide that explains how to do it based on your page builder:
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/


🔍 Explore more styling options

  • Developer Handbook: https://wpdatatables.com/developers

  • Our built-in CSS Selector Reference: https://wpdatatables.com/developers/css-selectors-in-wpdatatables/

Did this answer your question?
😞
😐
😁