How to make tables have a white/clear background?

Highlighted
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
Highlighted
Shopify Partner
1159 31 204

can you share a link to the blog post?

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
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
Highlighted
Shopify Partner
1159 31 204

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
}

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
1 Like
Highlighted
New Member
3 0 0

Just tried this and it worked - thanks so much!

 

0 Likes
Highlighted
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
Shopify Partner
1280 169 403

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 my solution helped you, please like and accept as solution!
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
Highlighted
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
Highlighted
Tourist
4 0 0

I put this in a blog post table under theme.scss.liquid for the brooklyn theme. 

 

It changed all the fonts on the website (menu and all and shrunk it). It gave a nice white background but it also added borders which I do not want. 

 

When I added it without the style tags in the same location it made it act funny and some letters of words had disappeare


@Ninthony wrote:

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.



d even when they were in my editor. 

0 Likes