Jump to content

CSS Styling Table Plugin - full width tables

Recommended Posts

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"


Link to comment
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment

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:

  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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.