Custom Column Widths in wpDataTables

Learn how to set specific widths for your table columns using built-in settings or custom CSS.

You can set custom column widths in two main ways:


1. Set Widths via Table Settings

Go to your table’s Settings > Display tab
🔗 Table Configuration Page Overview
Enable the “Limit table width” option

This will allow you to define a custom width for individual columns.

📌 Go into each Column settings → Display settings, and in the Column width, enter:

  • A number in pixels (e.g. 150)

  • Or a percentage (e.g. 20%)

Example:
If we reduce the width of a column — here’s how it looks before and after the change:


2. Set Widths Using a CSS Class

You can also use a custom CSS class to style multiple columns at once.

  • Add a class to your column (e.g. customWidth)

  • Then apply styling via:

    • Global CSS: Main wpDataTables Settings → Custom JS and CSS → Custom CSS

    • Table-specific CSS: Customize → Custom CSS for that table

.customWidth {
  width: 200px !important;
}

This is useful if you want consistent widths across multiple tables using the same class.


If you have any questions, feel free to reach out to Support!

Did this answer your question?
😞
😐
😁