Need help creating an email signature with html/scss - html

Question

I am a junior developer and I create a signature in html/scss.
When I copy/paste my rendering on gmail or outlook everything works fine but when I paste my rendering on windows email the rendering is distorted. Anyone know where the problem comes from?
Here is my code: https://codepen.io/kevinkotcherga/pen/WNyVdMb
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
table {
td {
padding: 0;
// border: 1px solid black;
}
.td-empty-top {
padding-top: 20px;
}
.td-empty-bottom {
padding-bottom: 20px;
}
.td-skip-a-line {
padding: 5px 0;
}
.td-logos {
text-align: center;
}
.td-empty {
visibility: hidden;
margin: 0;
padding: 0;
line-height: 0;
}
}
// .margin-right {
// padding-right: 320px;
// }
.margin-right {
padding-right: 170px;
}
.margin-right-keryan {
padding-right: 212px;
}
.dev-in-net {
width: 130px;
padding: 0 30px 41px 30px;
}
.bold {
font-weight: bold;
}
.padding-left {
padding-left: 50px;
}
.logo {
height: 20px;
width: 20px;
margin-right: 5px;
margin-top: 2px;
}
.linkedin-devinnet {
height: 23px;
width: 23px;
}
.gif {
width: 100px;
}
.keryan {
font-size: 25px;
color: #023047;
}
.font-size {
font-size: 14px;
color: #023047;
}
.vertical-divider {
border-left: 3px solid #FFA033;
height: 20px;
margin: 0 10px;
}
a:-webkit-any-link {
text-decoration: none !important;
}
a {
text-decoration: none !important;
}
.color-link:-webkit-any-link {
color: #023047 !important;
text-decoration: none !important;
}
.center {
display: flex;
align-items: center;
}
.min-width-kevin {
font-family: 'Noto Sans', sans-serif;
min-width: 573px;
border-top: solid 0.5px rgb(229, 229, 229);
border-bottom: solid 0.5px rgb(229, 229, 229);
min-width: 573px;
}
<table class="min-width-kevin">
<tbody>
<tr>
<td class="td-empty-top" colspan="{2}"></td>
</tr>
<tr>
<td rowspan="8" class="td-img">
<img
class="dev-in-net"
src="https://devinnet.fr/images/images-email/devinnet-image-anime.gif"
alt=""
/>
</td>
<td class="bold keryan margin-right">Name Surname</td>
</tr>
<tr>
<td class="font-size">
<span class="bold">Company</span>
<span class="vertical-divider"></span>Front end developer
</td>
</tr>
<tr>
<td>
<a href="" target="_blank" rel="noreferrer">
<img
class="logo"
src="https://devinnet.fr/images/images-email/logo-www.png"
alt=""
/>
</a>
<a href="" target="_blank" rel="noreferrer">
<img
class="logo"
src="https://devinnet.fr/images/images-email/logo-github.png"
alt=""
/>
</a>
<a href="" target="_blank" rel="noreferrer">
<img
class="logo"
src="https://devinnet.fr/images/images-email/logo-linkedin.png"
alt=""
/>
</a>
</td>
</tr>
<tr>
<td class="td-skip-a-line"></td>
</tr>
<tr>
<td class="font-size">
<a class="color-link" href="">
<span>contact#company.com</span>
</a>
<span class="vertical-divider"></span>
01 01 01 01 01
</td>
</tr>
<tr>
<td class="font-size">24 random street, NY</td>
</tr>
<tr>
<td class="font-size center">
<a class="color-link" href="">
<span>www.company.com</span>
</a>
</td>
</tr>
<tr>
<td class="td-empty-bottom" colspan="{2}"></td>
</tr>
</tbody>
</table>
I saw on some examples that developers indent tables in tables, I tried to reproduce the code but I don't understand the logic : https://academind.com/tutorials/build-a-custom-email-signature