HTML Link Hoverover Buttons - html

Question

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>

Answer 1

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/

Answer 2

I believe this is the effect you are going for.
<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;
}
td {
float: left;
margin: 0 3px;
}
</style>
<table width="100%">
<tbody>
<tr>
<td>
<a class="mylink" href="http://www.zzz.com/">ZZZZZZZZZZ</a>
</td>
<td>
<a class="mylink" href="http://www.aaa.com/">AAAAAAAAAAAAAAAAAAAAA</a>
</td>
<td>
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td>
</td>
</tr>
</tbody>
</table>
I removed the style tags from the "td" elements and added the following into the "style" tags
td {
float: left;
margin: 0 3px;
}