Gmail app puts unwanted borders around tables - CSS

[NaTiXLuX]

I have the issue that on mobile devices (especially on gmail app(Android),
unwanted borders appear around specific tables.

screenshots gmail app on Android:

(See post below for code zip)

I have been searching everywhere. I hope someone can help me.

[PaulOB]

Hi,

I’ve removed your link as it sent me to an adult site and also popped up a warning from my Virus checker Those upload sites are notoriously dangerous and you should avoid using them.

I’ve attached a zip here for others to use.

.natixlux.zip (4.7 KB)

You could try something like this but don’t know if it will work as I can’t really test on anything other than chrome’s android mode.

table table {vertical-align:top;margin:-1px}

It may offset the nested table and cover the border.

Otherwise I am out of ideas.

[NaTiXLuX]

Hi,

Thank you for uploading the zip. I’m sorry for that.

I tried the margin on my table and classes. On gmail app it doesn’t support the margin, on iPhone it does it, but still puts the border around.

I also tried to set the border to 0, none, white, transparent, hidden. Nothing worked.

[PaulOB]

Unfortunately the only things I can suggest you have probably tried.

e.g.
border-collapse:collapse on all tables
Set all td cells to vertical-align:top.
Set all images to display:block

According to this article the issue seems to be when applying a background color to the individual table-cells.

[NaTiXLuX]

Hi thank you for your help.

I figured it out now. It was because i set the background-color the same as body. i changed it, it works now.

Have nice day.
Thank you.

[PaulOB]

Glad you sorted it. I thought it may be something to do with the background-color