OK, so I've been trying to resolve this issue for what's now close to three weeks and still can't wrap my head around it.
I'm trying to make an HTML signature for a company and I'm almost at the end of it. Becuase they require their own fonts to be used, the process goes like this:
1) I generate a HTML file with the signature exactly as I want it to appear
2) Screenshot it with Node.js using Puppeteer
3) Slice that image up into 4 parts
4) Put those images alongside a prepared HTML template in the signatures folder.
The HTML template is using two nested tables, divided like this:

https://i.imgur.com/bVZc2zE.png

Although when I send the signature from Outlook to Outlook, it looks pretty much the way it should, opening it in any web mail service shows it with additional spacing and the table cells larger than intended:

https://i.imgur.com/wTbx2t8.png

What's going on is actually well visible when I select the whole table in the browser:

https://i.imgur.com/2sc1rGM.png

  <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html !important; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
        <tbody>
            <tr>
                <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                    <img src="images/uni_1.png" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" alt="Logo Dekre" border="0" valign="top"/>
                </td>
                <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                    <table width="140" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse !important;">
                        <tbody>
                            <tr>
                                <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                                    <img width="140" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" src="images/uni_2.png" valign="top" alt="" border="0"/>
                                </td>
                            </tr>
                            <tr>
                                <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                                    <a href="mailto:mailovaadresa">
                                        <img width="140" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" src="images/uni_3.png" valign="top" alt="" border="0" />
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td style="border-collapse:collapse !important;Margin:0 !important;border:0 !important;padding:0 !important;vertical-align:top !important;" valign="top">
                                    <a href="http://www.dekre.cz/">
                                        <img width="140" style="Margin:0 !important;border:0 !important;padding:0 !important;display: block !important;vertical-align:top !important;" src="images/uni_4.png" valign="top" alt="" border="0" />
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
        <img src="images/zapati500.png" />
    </body>
  </html>