Need CSS for table background & border

[VerbCreative]

Hi there

I have added a table into my page, but it automatically adds a background color to one side and a border around that cell, as well as at the bottom - is there code to get rid of it? I just need a transparent background and no border.

The page is here: https://mathimaginefoundation.ca/pages/our-impact

Thanks!

[namphan]

Hi @VerbCreative ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

#shopify-section-page-heading-image-1 {
    display: none !important;
}

#shopify-section-page-heading-image-1 + div .page-content .rte table tr td {
    border: none !important;
}

[akshay_bhatt]

Hi @VerbCreative ,

To remove the background and borders from your table:

1. Edit your theme’s CSS:

   • Go to Online Store > Themes > Edit code and open themes.css.liquid or styles.css.liquid.

2. Add this CSS:

/* Remove background and borders from the table */
.page-content table {
    background-color: transparent !important;
    border: none !important;
}

/* Remove cell borders and background for each cell */
.page-content table td, .page-content table th {
    background-color: transparent !important;
    border: none !important;
}

save and refresh.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[Mehran_Ali]

Hi @VerbCreative
Just follow these steps

1. Go to the Online Store
2. Edit Code
3. Find theme.css / base.css
   Past the CSS code their

.page-content .rte table tr td { background: transparent !important; border: 0;}

[VerbCreative]

Thanks! Just to clarify - will that change all tables throughout the site, since I am amending the theme?

[VerbCreative]

Thanks! Just to clarify - will that change all tables throughout the site, since I am amending the theme? I only need to change the table on this page…

[namphan]

Hi @VerbCreative ,

Please go to Actions > Edit code > layout > theme.liquid file and add the code before the tag:

{% if page.handle == 'our-impact' %}
    
{% endif %}

The code will only work for this page and everything displays fine.

[DaisyVo]

Hi @VerbCreative

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

.scrollable-wrapper * {
    border: none !important;
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Mehran_Ali]

OK, then you should add a code to your theme.liquid file first
Step 1: Edit Theme Files

1. In Shopify Admin, go to Online Store > Themes.
2. Find your theme and click Actions > Edit Code.
3. Open the file where the tag is defined. This is often in theme.liquid (in the Layout folder).

Step 2: Add Condition to the Tag

1. In theme.liquid, locate the tag. Then, add a conditional check before the body tag closes bracket " > "

{% if template == "page" and page.handle == "our-impact" %} page_title="our-impact-class"{% endif %}

• This code will add an attribute in your specific page as ’ page_title=“our-impact” ’

Step 3: Add Css

1. Search for theme.css / base.css file
2. Past this CSS their

body[page_title="our-impact"] .page-content .rte table tr td { background: transparent !important; border: 0;}

I hope this will work It will use this CSS to remove borders from the specific page only

If this works fine otherwise just share your collaboration code with me I will do that for you

If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee

[VerbCreative]

That worked for removing the border on the table, but it didn’t remove the purple background in the table; it removed the background on the page itself instead…

[VerbCreative]

Would this only affect this one page, or all pages? I need it to just affect this page

[namphan]

Hi @VerbCreative ,

Please change all code:

{% if page.handle == 'our-impact' %}
    
{% endif %}

[VerbCreative]

That worked perfectly! Thank you very much

[namphan]

Hi @VerbCreative ,

You’re welcome and happy to help you