css - 覆盖上标所需但由表属性应用的垂直对齐

Question

下面是我的代码：

<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不起作用（# 不在顶部。它与条款和条件文本在同一行）。

我的猜测是vertical-align被superscript属性覆盖table。

下面是table从 Web 开发人员那里获取的属性的默认使用样式表。我也抓到了sup。我没有看到它的价值观在 Web 开发人员中被取消了。

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;
}

如果我放置sup外部table属性，它工作正常。我怎样才能让我sup在里面工作table？

Answer 1

valign="top"是原因。如果您删除它，上标将起作用。

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

或者如果你想保持 v-align，封装：

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