Hide table on mobile version

Hello,
This falls under custom solutions, so our Support is limited to only basic advice with examples.
If you need to completely hide the entire table for mobile screens, yes, this is possible with custom CSS.

1. For Simple tables, you can use this CSS to hide the table and the table title :

@media only screen and (max-width: 600px) {
    
  table#wpdtSimpleTable-28 {
    display: none !important;
}

#wdt-table-title-28 {
display : none !important;
}

}

Just make sure to change the id of 28 to your actual table ID and you need to add one CSS line for each table ( if you got multiple tables on 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.

You can also define what will be the ‘max width’ for this CSS media query breakpoint.
In this example, this will activate the CSS for any screen that has width less than 600 pixels, but you can edit that and you can also add multiple ‘breakpoints’ with different styles.
If you wish to learn more on CSS media queries, please check it out here.

2. For other dataTable types on any screen width less than 600px, you can do this CSS :

@media only screen and (max-width: 600px) {
    
  .wpdt-c .wpDataTables.wpDataTablesWrapper {
display: none !important;
}

}

I hope it helps.
Kind regards

• This reply was modified 9 months ago by wpDataTables.