How to make border around table invisible on page, Refresh theme

Store Design
, ,

Topic summary

  • Issue: Need to remove the visible border around a table on the Prices page in a Shopify store (Refresh theme).

  • Initial advice: Add CSS to remove table borders globally (e.g., using table { border-collapse: collapse; border: none; }).

  • Clarification: Asked where to place the CSS (theme.liquid?).

  • Final solution: Add CSS at the bottom of base.css targeting the rich text area tables (.page-width–narrow .rte table, and related tr/td) with border: none and box-shadow: none. This ensures borders and any shadow styling are removed within the page’s content area.

  • Outcome: The change in base.css worked and the borders disappeared.

  • Notes: The central fix was a CSS snippet placed in the correct stylesheet (base.css), not theme.liquid. The .rte selector refers to rich text editor content in the theme.

  • Status: Resolved; no further action needed.

Summarized with AI on December 28. AI used: gpt-5.
1

I have a table to organize text on my page https://sugarbeez.com/pages/prices - but I cannot figure out how to get rid of the border around the table.

2

To remove the border around the table on your Shopify page, you can add the following CSS code to your theme’s stylesheet. This code will collapse the borders between table cells and remove any border styling from the table.

table {
border-collapse: collapse;
border: none;
}

3

This would be added to theme.liquid?

4

Hi @Tracy_Vasquez add this to the bottom of base.css file

.page-width--narrow .rte table, .rte table tr, .rte table td {
    border: none;
    box-shadow: none;
}
5

Ahsan_ANC - thank YOU! That worked!!!