I am writing some code for sending HTML e-mails. Due to the non-standard nature of e-mail clients, I am restricted to some pretty antediluvian code (no Javascript, no divs, no CSS shortcuts, etc.)
The call-to-action buttons are TDs but so far I haven't been able to make the whole button clickable; just the text in the middle.
The code is something like
<table width="100%" border="0" cellpadding="0" cellspacing="20">
<tr>
<td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px; padding-top:20px; padding-right:10px; padding-bottom:20px; padding-left:10px;">
<a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
</td>
I have already tried adding display:block
to the td style, but that didn't work.
Am I trying to do the impossible?
Make the anchor a block level element and move the padding from the table cell to the anchor:
<table width="100%" border="0" cellpadding="0" cellspacing="20">
<tr>
<td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px;">
<a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="padding:20px 10px;display:block;color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
</td>
</tr>
</table>
You cannot make a <td>
clickable without JS
Enlarge the inner <a>
size instead - to cover the needed area,
setting it's display
to block
might help.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With