Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Table Alignment on Squarespace


Question

Site URL: http://oddfellows.squarespace.com/home-test

Hi Circle Members,

I'm working on a site at the moment and have used tables in code injection to build the menu section but all the prices need to align on the right hand side like in the attached image. 

Could anyone please take a look and let me know how I can do that?

The url is http://oddfellows.squarespace.com/home-test

And the password is "asas"

1254754019_ScreenShot2021-07-16at3_39_39PM.thumb.png.7de82de3f2aea839499549d7ea01b187.png

Link to comment

1 answer to this question

Recommended Posts

  • 0
2 hours ago, rishisamuelpatel said:

Site URL: http://oddfellows.squarespace.com/home-test

Hi Circle Members,

I'm working on a site at the moment and have used tables in code injection to build the menu section but all the prices need to align on the right hand side like in the attached image. 

Could anyone please take a look and let me know how I can do that?

The url is http://oddfellows.squarespace.com/home-test

And the password is "asas"

1254754019_ScreenShot2021-07-16at3_39_39PM.thumb.png.7de82de3f2aea839499549d7ea01b187.png

you should add this css and modify the html of the table as follow

#teatable .pricing {
  text-align: right;
}
#teatable .pricing-row {
  display: flex;
}
#teatable .pricing-row * {
  width: 33.33%;
}

1. Convert this row into spans, add class pricing-row to the th/td

image.png.09cb93cfe0ee86aaea20b5cf44ff4ef7.png

image.thumb.png.d702fb28e7760a36916917c68118ed4b.png

2. Add class pricing to all price element (include the new span created to wrap the price in the step 1

image.thumb.png.f7e7dcd6272b61e3c171e5cc926513a0.png

3. Replicate the process to all cell and row as needed

image.thumb.png.fb29822c6831d34966f9790ec8439941.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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...