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

Hello!

dannyelo_0-1689013111832.png
dannyelo_0-1689013111832.png601×235 20.8 KB

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

1 Like