Hi, TonyF.

1. For setting up separate styles/look that will apply only to mobile screens,

you can add a custom Media Query for a Responsive Design.

Here is an example, if we wish to reduce the width of the entire container that holds all the filters above the table to 50% width of the page, and to place them at the center horizontally.

/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
.wpdt-c .wpDataTablesFilter {
    line-height: normal !important;
    width: 50% !important;
    margin: 0 auto !important;
}
}

You can try this CSS selector for manipulating the width of each filter's container :

.wpdt-c .wpDataTablesFilter .wpDataTableFilterSection:not(#wdt-clear-filters-button-block):not(#wdt-pf-search-filters-button-block) {
    width: 151px;    
}

As above, if you need this only for mobile screens, add this style wrapped inside the media query, like :

@media only screen and (max-width: 480px) {  ... all your CSS for mobiles here ... }

-

To add this, if you need the same for all tables, add it to main plugin settings/Custom JS and CSS/Custom CSS,

or for just one table, add it to the table's Customize/Custom CSS.

Let me know if that helps.

Hi, TonyF.

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.

-

I see what you mean. For example, on my tables as well, if I disable editing and Table Tools, it does leave some gap between the table and the fitlers above.

Here is a CSS you can use to reduce the bottom margin of the wpDataTables Wrapper, if you wish to try :

.wpDataTablesWrapper {
    margin-bottom: 0px;
}

This default value is 20 pixels, I reduce it to zero there.

You can go in the minus values as well, up to -33px, this is how it looks on my end.

I hope that helps.