Only outlook kills my signatures Styles, why?

Question

It is my first time asking for help, but I want to know, why this signature (made by me) works in all the clients I have tested, except with Outlook and Microsoft mail. It works properly on Gmail and mobile Gmail's version.

this is what i see on outlook: No styles, not cool

And this is gmail: Styles, cooler

Here's my code:

<table style="min-height: 400px;width:2vh;">
    <hr>
<table style="margin-left: 5%; width: 70%; padding-top: 2%; padding-right: 0; padding-bottom: 5%; padding-left: 10px; font-family: 'Oxygen', sans-serif; font-size: 0.9vw;">
    <tbody style="width: 100%; height: 100%;">
        <tr style="width: 100%; height: 100%;">
            <td style="width: 25%; height: auto; ">
                <img src="image1.png" alt="trq" style="max-width: 70%; max-height: 40%; padding-right: 20px;">
                <br>
                <br>
                <a href="example.com"><img src="ico.png" width="12%" alt="instagram link" style="MARGIN-left:8%;"></a>
                <a href="example2.com/"><img src="image2.png" width="12%" alt="Primary Theory LinkedIn Link"style="margin-left: 5%;"></a>
                <a href="link.com"><favicon.png" width="12%" alt="youtube link" style="margin-left: 5%;"></a>
            </td>
            <td style="border-left: 2px solid #f1451e; width: 5%; aspect-ratio: 20/100;"></td>
            <td style="padding: 0px; position: absolute;height: 100%; ">
                <b></b>
                
                <a href="example3.com" style="text-decoration:none; color:black;padding-left:0.5%;"><img src="phone.com" height="10px" alt="Orange Phone Icon"> +34 (964) 40 10</a>
                <br>
                <a href="example.com" style="text-decoration:none; color:black;padding-left: 0.5%;"><img src="image.png" height="10px" alt="Orange Link Icon"> site.com</a>
                <br>
                <a href="" style="height: 100%;"><img src="catalog.png" alt="The logo for 'Primary Theory'" style="width:8%;"></a>
                <a href=""><img src="catalog2.png" style="width:8%;margin-left: 1%;"></a>
            </td>
        </tr>
    </tbody>
</table>
<br><br><br><hr>
</table>

I tried making a table inside of another one, and avoiding "divs", but it simply do not works.

Answer 1

Alright, I think I found the solution on my own. What I had to do was remove values like 'heights', 'max-heights', and 'widths' from the style tag and add them to the element by using them outside of it.

For example:

<a href="site.com"><img src="image.png" width="25%" style="width:25%;margin-left: 5%;"></a>

In this case, I'm not sure if it's advisable to continue using CSS styles like 'width:25%', or if I should just remove them altogether, but in my case it works without any issues, both in Gmail and Outlook.

It's also true that in Outlook the sizes and proportions don't match perfectly.