Hi Mark,

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.

We will first advise on our built-in/native way to have Word Wrap.

1. For word wrapping of the main cells of the Table, in the rows, you can easily achieve this.

Just enable "Limit table width to page width" in the Table's Display settings, then you will see a new option 'word wrap' appear.

Please check more about these options for Table's Display settings here.

2. In case if you also need to 'word wrap' the Header Row as well, that needs a custom workaround.

You can 'force' the Header row to have the 'word wrap' , with this CSS :

.wpDataTablesWrapper table.wpDataTable > thead > tr > th {
    white-space: pre-wrap!important;
}

If you want all your Table headers to have this, add this to the main Plugin settings/Custom JS and CSS/Custom CSS.

Or if you just need it for one Table, go in the Table's Customize/Custom CSS and insert it there.

If you have multiple Tables on the same Page, and for example, if this CSS makes the 'other tables' wrap the Header row - but if you just want to 'target' a specific Table ID - you can use the Table ID like this :

.wpDataTablesWrapper table.wpDataTableID-76 > thead > tr > th {
    white-space: pre-wrap!important;
}

Just change the 76 to your table ID.

In this case, if you need multiple Tables on the same WP Page and to 'target' each table individually by ID, it is best to directly add this CSS to the Page.

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

2. But, if you need to have the Horizontal Scroll ( Scrollable option from the Display settings) enabled;

in that case, you can't have our built-in/native option to Word Wrap.

We mentioned this on the Documentation for the Table layout and table word wrap :

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.

-

You can only try custom workarounds if you need to 'force word wrap' in the header, while having Horizontal Scroll, for example like this :

.wpDataTablesWrapper table.wpDataTable > thead > tr > th {
    white-space: pre-wrap!important;
}

Here is a screenshot of a dummy table I just made with the same Header Text on one column as you pointed out, how it looks with the Scrollable option without any CSS :

And here is how that custom CSS looks applied to the Header row :

So with that specific CSS, we can not choose after which word it will 'break the text', but you can manipulate that by adding custom Column width. If you make that Column forced to a specific width and allow it just enough width to show the words as you need them, it could work.

Here is a workaround to have custom column width combined with "Scrollable" :

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;
}

That was an example of 300 pixels column width, but in your case, you would need to change it and find the perfect width which will 'break the text' exactly where you need it.

You can try to find better alternative custom CSS workarounds online, on places such as StackOverflow, and various CSS tutorials such as W3Schools and similar, if you wish to try if there is any better way;

this is the only idea we have at the moment.

If you wish to see better native solutions in our Plugin for this scenario ( having Scrollable combined with word wrap), you can make a development suggestion.

Please feel free to search on our suggestions page, 

 to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

Hello Mark.

Milos is on vacation so I'll jump in to thank you for your kind words! I’m glad to hear that everything is working well. I’ll go ahead and close the ticket for now.

If you need any further assistance in the future, don’t hesitate to reach out.