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 无效(# 不在顶部。它与条款和条件文本在同一行)。

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

以下是从 Web 开发人员那里获取的 table 属性的默认用法样式表。我还捕获了 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>