Change the border colour of a table on a product page

Store Design

Topic summary

Goal: Make a product description table’s borders invisible (appear white) on the product page via CSS (styling code).

Key solutions shared (add to theme.css or base.css via Online Store > Themes > Edit code):

  • Selector targeting product tables: .product-block .table-wrapper table { background: none !important; }
  • Alternative, more general selector: .table-wrapper > table { background: unset; }

Notes:

  • Both solutions remove the table background, which in this theme resolved the visible border/outline effect without directly changing border color.
  • Code snippets are central to the fix.

Outcome: The store owner confirmed the solution worked and expressed thanks. No further issues or disagreements.

Status: Resolved; the action is to add one of the provided CSS rules to the theme stylesheet.

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

Hi there,

I added a table in the “description” section and would like to change the border colours so they are invisible (ie. colour them in white).

I found this CSS code on this forum, but I do not know where to find the information to “call” the table so it applies to it:

td {
width: 100%;
border-collapse: collapse;
border: 1px solid white;
}

Could you please help me?

Here is the link to the product page: https://www.aktyva.com/collections/tennis-machines-equipment/products/elite-2-pack

Thank you for your help,

Greg

2

Hi @Aktyva ,

Try adding below css to theme.css file.

.product-block .table-wrapper table {
    background: none !important;
}

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

1 Like
3

Hello @Aktyva

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

.table-wrapper > table {
  background: unset;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

4

Hi, thank you very much for your help! That worked :slightly_smiling_face:

5

Hi, thank you very much for your help!