vertical-align在我的表中不起作用

Question

我正在尝试使用星号。 默认情况下，它们在某种程度上是对齐的（hello *****） 我正在使用vertical-align：sub并且它不起作用，我认为它必须要做，也许我也正在使用文本对齐？

＆＃13;

＆＃13;

        <table cellspacing="0"style="border-spacing:0;">
            <tr style="line-height:15px;">
              <td style="width:30%;">C</td>
              <td style="text-align:right;vertical-align:sub;">*****</td>
            </tr>
             <tr style="line-height:15px;">
               <td>C+++</td>
               <td style="text-align:right;">*****</td>
            </tr> 
             <tr style="line-height:15px;">
               <td>Java</td>
               <td style="text-align:right">****</td>
            </tr>
            <tr style="line-height:15px;">
              <td>C#</td>
              <td style="text-align:right;">***</td>
            </tr>
            <tr style="line-height:15px;">
              <td>Javascript</td>
              <td style="text-align:right">**</td>
            </tr>
            <tr style="line-height:15px;">
              <td>Python</td>
              <td style="text-align:right;">*</td>
            </tr>
         </table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不认为星号是“对齐”的。这只是一个以这种方式设计的角色。如果您希望它位于底部，您可以尝试以下操作。

table tr {
  line-height:15px;
}
table tr td:last-child {
  text-align: right;
}
table tr td:last-child span {
  line-height: 0;
  vertical-align: -7px;
  vertical-align: sub;
}

<table cellspacing="0" style="border-spacing:0;">
  <tr>
    <td>C</td>
    <td><span>*****</span></td>
  </tr>
  <tr>
    <td>C+++</td>
    <td><span>*****</span></td>
  </tr>
  <tr>
    <td>Java</td>
    <td><span>****</span></td>
  </tr>
  <tr>
    <td>C#</td>
    <td><span>***</span></td>
  </tr>
  <tr>
    <td>Javascript</td>
    <td><span>**</span></td>
  </tr>
  <tr>
    <td>Python</td>
    <td><span>*</span></td>
  </tr>
</table>