Responsive design is the practice of designing a table so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops. WooCommerce Tables are fully responsive and look great on any device.
The plugin provides 4 different modes of Responsive design according to your needs:
In this mode, if table content doesn’t fit all columns become under each other with one cell per row.
Automatic column hiding.
In this mode, table columns will collapse from right to left to parent container width.
Also, you can select screen width to hide columns for the mobile screen and set which columns should be hidden on the Content tab in the column options:
In this mode, the scroll bar will be added if the table overflows parent container width. You can change the horizontal scrollbar position – display it in header, footer or both.
Disable Responsivity – default table layout.
If you resize the browser or view the page on a small device, the table will adjust its size automatically based on screen size, and in the same way, will be adjusted to the size of any device.
Here you can look at the examples of product tables which has been built using WooCommerce Tables by Woobewoo.