Hi Lemarie,

Sorry for the waiting time.

We don't work on weekends so it adds two days to the waiting time.

we appreciate your patience.

-

I believe the total width of the table data is the issue on your Page.

If we inspect your HTML and highlight the table wrapper element, it seems it is on the centre of the Page :

For example, the column SCOPE has large text, which expands the table going over the Page right edge :

Can you try these two variations from the Table Display settings and see if one of them helps?

1. For example, if you wish to have a horizontal scroll on this table, activate "Scrollable" in the table's display settings and check how that looks on front-end.

2. Another way, you can limit the table width to Page width.

First disable scrollable, then this option will become available.

If you enable "Limit table width", you can also try out the 'word wrap' option, and see how that looks.

3. Additionally, there is also a way to make custom Column width, 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;
}

Let us know if you have further questions  about that.

4. We also have a workaround if you wish to try combining the "scrollable" ( for the horizontal scroll)  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.