How to Use Custom Column Widths with Scrollable Tables in wpDataTables

How to Set Custom Column Widths in Scrollable Tables?

By default, wpDataTables doesn’t allow you to combine the “Scrollable” option with custom column widths — because custom widths require enabling “Limit Table Width”, which automatically disables horizontal scroll, as explained in our Documentation.

There’s a workaround that allows you to:

Enable horizontal scrolling
Define custom widths for one or more columns

Step-by-step workaround:

1. Enable “Scrollable” in the Display tab of your table settings.

2. Add the following custom CSS to the table’s Customize → Custom CSS section:

.wpDataTablesWrapper table.scroll.wpDataTableID-1 {     
    width: max-content !important;    
    table-layout: fixed !important;
}

.wpDataTableID-1 th.column-yourcolumn {     
    width: 300px !important;
}

• Replace wpDataTableID-1 with your actual table ID

• Replace yourcolumn with the original header name of the column (see below)

Example

Let’s say your table ID is 2671 and you want to set a fixed width for the firstname column.

Your CSS would look like this:

.wpDataTablesWrapper table.scroll.wpDataTableID-1 {     
    width: max-content !important;    
    table-layout: fixed !important;
}

.wpDataTableID-1 th.column-yourcolumn {     
    width: 300px !important;
}