Change table style in product view

Theme discussion Baseline
#1

Hi,

I’ve been having a bit of fun changing up my site but I have got a little stumped this time around.

I have some tables in the descriptions of my products. They show up fine, however I want to apply some specific css styles to them to make them look a bit different. (The two things I want to do are (1) define the border width and (2) hide the vertical borders so its shows horizontal borders only.)

There are some definitions in the css file already that define the border width, however I’m not sure where to add these… is it somewhere in the main-product.liquid file perhaps?

As you can see in this snip, the code is rendering the rich text element with mt-8. I am thinking adding the extra style definitions here might work.

Can anyone point me in a good direction here?

Thanks Hugh

image
image1920×1014 223 KB

#2

Hey Hugh,
This can be achieved via some CSS styling.

Firstly, to adjust the border width of the product tables, you can use the CSS below:
.template-product .rte table,.template-product .rte td,.template-product .rte th{
border-width:2px !important;
}

To remove the vertical borders, you can then add the CSS below:
.template-product .rte td{
border-left: 0;
border-right: 0;
}
.template-product .rte table{
border: 0 !important;
}

When tested on your store, this looks as shown below:

Here is a guide on how to add CSS to your theme:

Let us know if this helps :).

#3

Thanks so much for your help, this is perfect!

1 Like