Table Scroll override for mobile

I feel awkward asking this question but have failed to find an alternative.
I don't like tables but some components are using them to display data but have coded them to work well even at mobile device screen sizes. So I have a third party component that works well but uses simple tables, on other templates it does a good job of displaying on mobile devices but on the newer Gavick templates the mere presence of the table tab triggers the scroll bars intended to view tables on mobile devices. So I end up with a set of scroll bars on the page even though the table will shrink further because they are styled using % width.
So is there some way I can disable the table scroll bars, ideally using some template override on selective menu options?

Could you please post an url to your site - to a place where this problem can be seen?

I did PM you with the link, its currently a development server so I do not want to make that public.

OK figured this out.
The problem was the table fix CSS found in the mobile.css This adds a fixed width and some style to all tables as an override and also an instruction how to scroll. This is often a good idea for articles or stuff that is in a table and allows them to be seen using scroll bars. But it is a problem for some of the more responsive components that use tables with % widths because that gets overridden by the mobile defined fixed table widths. In my case joomla quiz deluxe.
I did not want to eliminate this feature by just removing the css code from the mobile.css file so used some more css to control when it would be used.
First I added a suffix "noautotable" into the template features for the menu id's I did not want the table scroll bars to be added. So I ended up with a few rules of the form item id and suffix in the template features settings.
Then to all the table fix lines of css code in the file mobile.css I added the code "body:not(.noautotable)" so lines like:
#gkMainbody table:before {
content: "Scroll horizontally to view the whole table";
height: 14px;
width: 100%;
display: block;
font-size: 10px;
margin-top: -30px;
margin-bottom: 10px;
font-family: Arial, sans-serif;
}
became
body:not(.noautotable) #gkMainbody table:before {
content: "Scroll horizontally to view the whole table";
height: 14px;
width: 100%;
display: block;
font-size: 10px;
margin-top: -30px;
margin-bottom: 10px;
font-family: Arial, sans-serif;
}
I did this for the six style rules in table fix.
This then switches off this template feature whenever I add the suffix to menu items I want to be left alone.
This seems like a complete solution to me, may have older browser issues, will check that out in due course, but works for all my test cases both mobile and desktop.
Please any feedback if there is a better way, also this should work on any of the templates in this series.

no-scroll.jpg

with-scroll.jpg

Well, actually you did almost what should be done... But editing template core files is a bad idea if you will decide to update the template in the future. Then override.css is a better place as this is the only file you would need to archive and bring back after update. Using override.css is simple - you just cope entire declaration, or just part of it (elements you modify). Override.css id loaded as last css file so it powers over all other css declarations.

Remember to enable "CSS override" in template settings - advanced section.