Rich text editor, tables, and removing vertical border

[hostilearth]

I'm attempting to remove all borders around a table, except for the bottom border of each row. In Shopify's rich text editor I have created a table and added the following CSS:

<style>
table {
    border-collapse: collapse;
}
tr {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
</style>

In the rich text editor I see this:

but when viewing the page I see this:

Why does the page persist to show the default table borders while the editor shows the CSS? (It isn't a propagation issue.)

Additionally, I have tried building the tables from scratch using this post, and the vertical border between columns persists. I'll take either method, the editor's table or a table built from scratch; I'm just seeking all borders but each row's bottom border being invisible.

Thank you

[ThePrimeWeb]

Hey @hostilearth,

Have you tried adding the !important tag. Maybe there's another CSS for 'tr' that is taking priority over yours. In any case, please also share the link to your store so I can check it out if the solution below isn't working

<style>
table {
    border-collapse: collapse;
}
tr {
    border-top: 1px solid red !important;
    border-bottom: 1px solid red !important;
}
</style>

[hostilearth]

Thank you for that suggestion. I thought it was going to work, but unfortunately, nothing changed.

[ThePrimeWeb]

Can you share the link to your store where this table is?

[hostilearth]

I don't have a link I can share, but it's very quick to duplicate.

[ThePrimeWeb]

Our codebases are different. Even if I duplicate it on my store, it doesn't mean I'm having the same thing as you. If the issue is on your store, we have to fix it on your store, not mine.

[hostilearth]

I understand your position, but I'm attempting this in a newly deployed dev store. It's vanilla Dawn, so this behavior I'm experiencing is default Shopify behavior. But thank you for trying to help; I do appreciate it.

[ThePrimeWeb]

You can try this instead. If it doesn't work, show me a screenshot of where you pasted the code.

<style>
td {
    border: 1px solid red !important;
    box-shadow: unset !important;
}

table {
    border: 1px solid red !important;
    box-shadow: unset !important;
}
</style>

[hostilearth]

Hi. It does work, in the sense that it puts a red border around all of the table (table plus inner rows and columns). Now, I can remove "table { ... }" and get just the inner borders, but I can't figure out how to remove the vertical border.

[ThePrimeWeb]

Ok I split it into individual sides, just remove what you don't need.

<style>
td {
    border-top: 1px solid red !important;
    border-bottom: 1px solid red !important;
    border-left: 1px solid red !important;
    border-right: 1px solid red !important;
    box-shadow: unset !important;
}

</style>

[hostilearth]

Thank you. That works, but unfortunately Shopify insists on keeping the original table borders. I have tried making them white, 0px, etc. What a weird decision. I'll have to build them from scratch, I guess.

[ThePrimeWeb · Accepted solution]

You mean like this?

I got it with this

table {
    box-shadow: unset !important;
}

td {
    border-bottom: 1px solid red !important;
    box-shadow: unset !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

You might have priority issues, if so, just try this if the above doesn't work

.product__description table {
    box-shadow: unset !important;
}

.product__description td {
    border-bottom: 1px solid red !important;
    box-shadow: unset !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

[hostilearth]

I'm sorry, I overlooked thanking you.

Thank you for your help.