Table Display/Tab Content

Hi,
Thank you for your patience, this css will make the inner tab width match the screen width so when the table is scrolled it will fully show:

@media only screen and (max-width: 767px) {
	.responsive #top.page-id-35 #wrap_all #main .av-layout-tab-inner {
		width: 100vw;
	}
}

but the problem is that on mobile the tab section also scrolls with ‘touchmove’ tab to tab and trying to scroll the table inside the tab actually scrolls the tab.
For mobile devices your table should have switched it’s layout, did you add and custom css to prevent this? You may need to allow the mobile switch so all of the columns show.
I also experimented with removing the ‘touchmove’ for the tabs but was not able to enable it for the tab childern elements at the same time, so this doesn’t seem to be an option.

(function($) {
$('.av-layout-tab').bind('touchmove', false);
}(jQuery));

Another option might be to show an image of the table for mobile that will open in a lightbox so the user can view it full screen.

Best regards,
Mike

Hi,
That is the code I tested to remove the touchmove from your tab section, it is not on your page.
You can test it if you like by adding it to the end of your functions.php file in Appearance ▸ Editor like this:

function custom_script() { ?>
    <script>
(function($) {
$('.av-layout-tab').bind('touchmove', false);
}(jQuery)); 
    </script>
    <?php
}
add_action('wp_footer', 'custom_script');

but my goal was to allow your table to scroll while removing it from your tab section, but it didn’t work as planned.

Best regards,
Mike