I am making an HTML Email and have decided to use tables for each of the nav elements. I need the tables to be displayed inline. I used display:inline-block; on the table creating the desired result, However the TEXT inside the table will not align. I have placed the text-align: center; in the table, td, and a tag but it has not worked.
I know the method works with divs but I can't find a solution for tables.
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top">
<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
<tr>
<td align="center"> <a href="#" style="text-decoration: none; color: #005E82;">
option 1
</a>
</td>
</tr>
</table>
<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
<tr>
<td align="center" style="text-align:center;"> <a href="#" style="text-decoration: none; color: #005E82;">
option 2
</a>
</td>
</tr>
</table>
<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
<tr>
<td align="center"> <a href="#" style="text-decoration: none; color: #005E82; text-align:center;">
option 3
</a>
</td>
</tr>
</table>
</td>
</tr>
CSS
.navInline {
display:inline-block;
vertical-align:top;
text-align: center !important; }
here is the not working code
You need to set a width attribute on your table cells.
Example:
<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
<tr>
<td align="center" width="130"><a href="#" style="text-decoration: none; color: #005E82;">option 1</a></td>
</tr>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments