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

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>