Overriding vertical-align required for superscript but applied by table attributes

Question

Below is my code:

<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr>
<td width="31%" align="center" valign="middle">
<a href="http://google.com/"></a> 
</td>
<td width="69%" valign="top">
Terms and conditions
<sup>#</sup>
</td>
</tr>
</table>

superscript is not working (# is not at the top. Its in the same line as of the Terms & conditions text).

My guess is vertical-align of superscript is getting overridden by table attributes.

Below is the default usage stylesheet of table attributes captured from Web developer. I have also captured for sup. I don't see that its values are striken off in Web developer.

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

td, th {
display: table-cell;
vertical-align: inherit;
}

td[Attributes Style] {
width: 31%;
text-align: -webkit-center;
vertical-align: middle;
}

sup {
vertical-align: super;
font-size: smaller;
}

If I place sup outside table attribute, it works fine. How can I get my sup working inside table?

Answer 1

valign="top" is the cause. If you remove it the superscript will work.

<td width="69%">
    Terms and conditions<sup>#</sup>
</td>

Or if you want to maintain the v-align, encapsulate:

<td width="69%" valign="top">
    <span>Terms and conditions<sup>#</sup></span>
</td>