How can I make these buttons all align left with about a 3px space between them and adjust their own size based on how much text is put into them?

Unfortunately I don't have access to my own CSS (someone charges hundreds for this privilege). I've been trying for hours but just can't figure it out:

<br>
<style>
.mylink {
    padding: 10px 35px;
    background-color: #434343;
    color: #fffFFF;
    text-transform: uppercase;
    letter-spacing: -.2px;
    text-decoration: none;
    font-family: helvetica,arial,sans-serif;
    border-radius: 5px;
    font-size: 12px;
    width: 100%
    }

.mylink:hover  {
    background-color: #ff0000; color: #fffFFF;
}
</style>
<table width="100%">
  <tbody>
        <tr>
                        <td width="0%" style="text-align: left;">
                <a class="mylink" href="http://www.zzz.com/">ZZZ</a>
            </td><td width="0%" style="text-align: left;">
                <a class="mylink" href="http://www.aaa.com/">AAA</a>
</td><td width="0%" style="text-align: left;">
                <a class="mylink" href="http://www.FFF.com/">FFF</a>
            </td>
            </td>
        </tr>
    </tbody>
</table>

Assuming that your other CSS is working by putting it inline (like you have put it), this should work, though a little hacky (floating cells and rows is ... unusual). I'd get rid of the table altogether if the effect here is what you want:

<style type="text/css">
.mylink {
    padding: 10px 35px;
    background-color: #434343;
    color: #fffFFF;
    text-transform: uppercase;
    letter-spacing: -.2px;
    text-decoration: none;
    font-family: helvetica,arial,sans-serif;
    border-radius: 5px;
    font-size: 12px;
    float:left;
}

.mylink:hover  {
    background-color: #ff0000; color: #fffFFF;
}
tr, td {
    float:left;
    padding:0;
}
</style>
<table>
  <tbody>
        <tr>
            <td>
                <a class="mylink" href="http://www.zzz.com/">ZZZZZZZZ</a>
            </td>
            <td>
                <a class="mylink" href="http://www.aaa.com/">AAA</a>
            </td>
            <td>
                <a class="mylink" href="http://www.FFF.com/">FFF</a>
            </td><!-- Remove the extra </td> here. -->
        </tr>
    </tbody>
</table>

What this should look like if it works: https://jsfiddle.net/cmhqr3dg/

more