html - 如何将表格中的数字向左对齐？

Question

https://jsfiddle.net/6a7d2snj/

我想在表格列内将所有数字对齐到左侧:

 50
  5
-40
 -4

但是怎么办？ style="align:right" 会在右边给出正确的对齐方式，但我想要在左边对齐!

Answer 1

如果没有额外的具有特定宽度的环绕元素，这对于文本对齐是不可能的。

没有对齐不共享父元素的元素/文本的 CSS 方法。

table, th, td {
  border: 1px solid black;
}

span {
  display: inline-block;
  width: 4ch;
  text-align: right;
  background: pink;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td><span>5</span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td><span>50</span></td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td><span>-50</span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td><span>-4</span></td>
  </tr>
</table>