Hi Auke,

Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

-

Yes, there can be a few different ways how you can handle this.

We have custom Column width available as well as word wrap, and there is an additional custom workaround if you want to try horizontal scroll with custom column width - only that third option is not possible with word wrap.

I will write all of the methods, so you can test them and see what suits your use-case best.

1. Custom column width  :

You can make custom widths for columns in two ways.

In the Table Settings - Display > enable 'Limit table width' option.

This will allow you to set a custom width on any column.

Enter the column settings / Column width > and set a number for pixels, or a percentage value.

Here is an example on my table > i shorten the width for this column :

2. Alternatively, you can also add custom CSS classes to multiple columns,

then you can manipulate this class through our plugins settings/Custom JS and CSS/Custom CSS, ( if you wish to set same style for all tables that have this class);

and also, each table has its own Customize/Custom CSS,

for example, if i add custom Class named "customWidth", i can call CSS like :

.customWidth {
width : 200px !important;
}

If you set custom column width, that sets the 'max width' for it - so any text which goes over that width will get visually 'cut off' with three dots.

2. Word Wrap :

When you enable Limit Table Width option in Display settings, you will see a new option appear as 'word wrap'.

Please check more on word wrap here.

Please note:

The “Limit Table Width” option is only shown once the “Scrollable” feature is disabled, and vice-versa. If you don’t see “Limit Table Width”, make sure that the “Scrollable” option is deactivated.

3. Third option, custom workaround if you wish to try Horizontal Scroll combined with Custom Column width ( the downside is you can't use 'word wrap' with Horizontal Scroll) :

We have a workaround if you wish to use "scrollable" ( for the horizontal scroll)  in the Display options of the table;

and to set a custom width for columns.

First enable "scrollable" in the Display tab, then you can add this custom CSS to the table's customize / Custom CSS tab :

.wpDataTablesWrapper table.scroll.wpDataTableID-1 {  
  width: max-content !important; 
   table-layout: fixed !important;
}
.wpDataTableID-1 th.column-strap {  
   width:300px !important;
}

You will have to replace the table ID with your table's ID,

and for the column name, you have to set the "origin header name" of the column, after this part : "th.column-"

For example, on my test table here,

if i wish to add the custom width in this CSS for the "firstname" column,

it would be 

.wpDataTableID-2671 th.column-firstname {  
   width:300px !important;
}

Let me know if that helped.

Thank you