title: Overriding vertical-align required for superscript but applied by table attributes
body: <p>Below is my code:</p>
  
  <pre><code>&lt;table border="0" cellspacing="1" cellpadding="0" width="100%"&gt;
  &lt;tr&gt;
  &lt;td width="31%" align="center" valign="middle"&gt;
  &lt;a href="http://google.com/"&gt;&lt;/a&gt; 
  &lt;/td&gt;
  &lt;td width="69%" valign="top"&gt;
  Terms and conditions
  &lt;sup&gt;#&lt;/sup&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><code>superscript</code> is not working (# is not at the top. Its in the same line as of the Terms &amp; conditions text).</p>
  
  <p>My guess is <code>vertical-align</code> of <code>superscript</code> is getting overridden by <code>table</code> attributes.</p>
  
  <p>Below is the default usage stylesheet of <code>table</code> attributes captured from Web developer. I have also captured for <code>sup</code>. I don't see that its values are striken off in Web developer.</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>If I place <code>sup</code> outside <code>table</code> attribute, it works fine. How can I get my <code>sup</code> working inside <code>table</code>?</p>