html, css zoom out tables

I am building a mobile webview that takes in a html string and renders it. It works fine for regular stuff. But when there are tables, all hell break loose.

I have a meta tag that sets viewport to initial-scale=1, maximum-scale=10 and user-scalable in order to optimize the reading experience on the mobile.

Tables now overflows the page. Is there a way to only zoom out tables until they fit within the viewport(as if viewport was set to device-width) while have everything else look the same? Would it work for nested tables?

I tried to enclose tables within a that has a zoom=pageWidth/(table width) but that also breaks when tables have a font specified in inches (seriously who does that?!?)

Please let me know if you have a good approach