CSS Styling Table Plugin - full width tables

I'm using the square websites custom table block plugin.

I'm trying to recreate my tables, but pulling the information from google sheets. 

The 3 tables on the top are SQUARESPACE. The 3 tables on the bottom are pulling from GOOGLE SHEETS.

I want the GOOGLE SHEET tables to re-size and stretch like the native SQUARESPACE ones. The GOOGLE SHEETS tables have a class of "pricetables"

https://www.brownleepress.com/postcards

I see both looks same. Can you describe in more detail?

When I resize my screen, to simulate different screen sizes, the tables function differently. The SquareSpace tables (TOP) is how I would like it to look. The imported tables (BOTTOM), spill into each other and won't hold at 100% with a gap. I'm thinking the container that the imported tables are in must not have a specified width or at least not be set in the way that the TOP tables are

I'm struggling a little bit now with getting the tables to stretch to 100% on mobile.

The fix for the other stuff was fiddling around with the plugins internal settings. There are a few options for the table's basic look, and I ended up going with 1 of the 2 settings for "full width." The setting that I chose had a little tag on there that says "use this one if you're having issues with tables overlapping" (which I was). 

Other than that, I just made some basic tweaks to the css. Truth be told, I'm not sure if these are fixes for the default or if I am just overriding styles that I've written for other pieces, but these helped when added to the specific table:

  width:100%!important;
  white-space: pre-wrap!important;
  table-layout: auto!important;

If anyone can help me with getting this thing to stretch to 100% wide in mobile, it'd be greatly appreciated.