How to make tables have a white/clear background?

New Member
3 0 0

Hi all,

We have been trying to edit tables in our blog posts and pages so that they blend better into the rest of the content. However, nothing we've tried so far has worked - inlcluding some simple code work-arounds suggested by the Shopify team. Has anyone had any luck resolving this issue?

Thanks!

0 Likes

can you share a link to the blog post?

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
New Member
3 0 0

Hi Lixon,

Yes we can :) This is one of the pages where we'd like the table to have a clear or white background: https://begoodorganics.com/pages/work-with-me.

Thanks!

0 Likes

Paste this code at the very bottom of your styles.scss.liquid . see http://take.ms/3CZJp

table tr td{
    background:#fff;
}

If you need white background while hovering, use this code 

table tr:hover td{
  background:#fff
}

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
New Member
3 0 0

Just tried this and it worked - thanks so much!

 

0 Likes
Tourist
8 0 0

Kinda late on this, but i have a question.. First of all - this worked, but i was wondering how could i implement this on product pages only?






0 Likes
Highlighted
Astronaut
835 95 178

You can put the code into your product.liquid inside style tags at the top of the page:

 

<style>
table tr td{
    background:#fff;
}
</style>

If you only have it on the product page, it will only effect that page.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
8 0 0

I originally had put the code from the first comment inside theme.scss.liquid instead of styles.scss.liquid - - because i couldn't find the styles liquid and it worked, but for all the tables on the site.

I have since removed the code from there and threw it inside product.liquid instead and it did exactly what i wanted! Thank you!

0 Likes