How to remove this unwanted table cell horizontal padding on Safari?

Question

I'm using a table: https://codepen.io/Offirmo/full/rNgjdEb

• Chrome and Firefox don't pad the cells horizontally
• Safari does, making the table appear larger

I've googled it, added margin+padding: 0, fiddled with the dev tools, but I wasn't able to remove it:

table {
    table-layout: fixed;
    border-collapse: collapse;

    * {
        margin: 0;
        padding: 0;
    }

How may I remove it? Is it even a cell padding or something else?

Answer 1

🤦‍♂️ found the issue myself.

It's not padding, it's "magic space" = simple whitespace. (more details: article from 2012)

The solution is to turn this (incorrect) html:

<td>
    <span>
        <span ...

Into this:

<td><span><span ...

Also CodePen's feature "format html" is partially responsible, adding whitespace (indentation) to the code above. So if using CodePen, one has to disable "format on save".

Final result: