How can I make table lines appear on my product page?

[LuizaSMC23]

Hi, I'm trying to add a table, in the product edition page the table appears, but in the product page no column or row line appears. How can I make the line appear? Also, on the live product page, the table is cut

For the table lines, I have tried to add the code  below at my theme.css code and it didn't help

td, th {
border: 2px solid #999 !important;
}

Edition page: table lines appear, table centralized

Live page: no table lines and table cut

Thanks in advance!

[dannyelo]

Hello,

Please share the page url.

[LuizaSMC23]

Hello, here it is:

https://shoptarz.com/

[BSS-Commerce]

Hi @LuizaSMC23 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[LuizaSMC23]

Hello there, here it is:

https://shoptarz.com/

[dannyelo]

Hello,

I think there is a specificity issue with your css declarations.

This works in the inspector.

table tbody tr td {
  border: 1px solid #cdcdcd;
  padding: 4px;
}

Try adding a class to your html:

<table class="size-table">
 ....
</table>

And then select that class insted of all the table elements.

The css should look like this.

.size-table tbody tr td {
  border: 1px solid #cdcdcd;
  padding: 4px;
}

Also I see a lot of inline styles in your code, try to avoid that, because that cause a lot of problems later.

Hope this helps.

[LuizaSMC23]

Hey, thanks for helping! Please your help because I don't understand about these things:

1- I should copy the first code and paste at my theme.css file?

2- I tried to find this html at the theme code, but I didn't find it there. Is this HTML at the edition product page?

3- Then I should copy the third code and paste in the theme.css file?

Sorry if this sound stupid, I really do not understand about it. Thanks in advance!

[dannyelo]

Hello!

Press the code button in the description editor.

Then write the class as in my example (inside the table tag).

class="size-table"

After that paste this code in your theme.css (at the bottom of the file).

.size-table tbody tr td {
  border: 1px solid #cdcdcd;
  padding: 4px;
}

Let me know.

Best

[LuizaSMC23]

Hey, thanks! I think I understood, but I'm afraid it didn't work:

Here is what I did:

Here is how the table is now:

[LuizaSMC23]

Here is the link of the page that I'm testing: 

https://shoptarz.com/collections/ready-for-summer/products/ankle-style-platfrom-boots-megan

[dannyelo]

Hello,

I check the testing page you sent me and for some reason is not loading those styles.

Try this:

1. Paste the styles into custom.css file instead of theme.css

2. Be sure your preview store is the same as the code you are editing.

3. Be sure to save the css file.

For me is working fine.

Let me know,

[LuizaSMC23]

Hello! Thanks for your help, I guess still didn't work, I paste the code at custom.css.liquid. Maybe it's because of the theme that I'm using

[dannyelo · Accepted solution]

Hello,

Is not because of the theme.

I already see your code loading in the page. But you put it inside a comment.

All code inside /* (code here wont run) */

Make sure you delete does slashes and asterisks.

Now you have it like this.

Change to this only.

.size-table tbody tr td {
  border: 1px solid #cdcdcd;
  padding: 4px;
}

Let me know,

[LuizaSMC23]

Hello, sorry for all the trouble! All perfect now, I really appreciate it! You rock 👏🙏

[dannyelo]

No worries! Its a pleasure!