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

Technical Q&A
, ,

Topic summary

A user needed help making table borders visible on their product page. While the table displayed correctly in the product editor with visible lines and proper centering, the live page showed no borders and the table appeared cut off.

Initial attempts:

  • Adding CSS border rules to theme.css didn’t work
  • The issue stemmed from CSS specificity problems

Solution provided:

  1. Add a custom class (“size-table”) to the HTML table tag via the description editor’s code button
  2. Insert specific CSS targeting the table elements:
.size-table tbody tr td {
  border: 1px solid #cdcdcd;
  padding: 4px;
}
  1. Paste this code in the custom.css file (not theme.css)

Key troubleshooting steps:

  • The user initially placed the CSS inside comment tags (/* */), preventing it from executing
  • After removing the comment syntax, the solution worked successfully
  • Helper also advised avoiding inline styles to prevent future issues

Resolution: Problem solved once the CSS was properly added to custom.css without comment tags and the class was applied to the table element.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
6

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

1 Like