在 HTML 表格中设置右对齐数字格式的优雅方法

Question

有没有一种优雅的方法可以在HTML表格中格式化右对齐的数字？

例如：

这：

0

/0赫兹

10/600赫兹

1200/1200赫兹

应该是这样的：

   0 /    0 Hz
  10 /  600 Hz
1200 / 1200 HZ

我的表如下所示：https://jsfiddle.net/cwwxrL8a/

Answer 1

在这种情况下，

优雅是非常非常主观的......

这取决于您是想弄乱表格单元格内的内容还是弄乱表格。这取决于此表的填充方式。

我

个人不喜欢制作一个包含大量单元格的表格，而且我绝对不喜欢拥有一列充满/的想法。

我会围绕你的两个数据部分，结束和总计。这个的缺点是宽度设置是必要的。但好处是它不使用表格进行样式设置。

给你一个小提琴：https://jsfiddle.net/9183ao41/2/

选择你的毒药。

Answer 2

我不知道

你想做什么是可能的，为该表内文本的每个部分提供ids/class。或者正如@Johannes所说，把所有东西都放在自己的牢房里。

我可以推荐的一件事是玩padding，word-spacing和letter-spacing，看看你是否能找到适合你想要的外观：

.freq{
  text-align: right;
  padding-bottom: 3px;
  padding-right: 150px;
  word-spacing: 5px;
  letter-spacing: 2px;
}

Answer 3

这大概是你的意思吗？

table {
  width: 100%;
}
tr {
  text-align: center;
}
th {
  border: 1px solid black;
  width: 20%;
}
td {
  border: 1px solid black;
  width: 20%;
}

<table>
  <tr>
    <th>Type</th>
    <th></th>
    <th>Freq</th>
    <td></td>
    <th>description</th>
  </tr>
  <tr>
    <td>RS64</td>
    <td>0</td>
    <td>/</td>
    <td>1200 Hz</td>
    <td>test</td>
  </tr>
  <tr>
    <td>SE1225<br></td>
    <td>0</td>
    <td></td>
    <td>1200 Hz</td>
    <td>test</td>
  </tr>
  <tr>
    <td>SE1226</td>
    <td>0</td>
    <td></td>
    <td>1200 Hz</td>
    <td>test</td>
  </tr>
</table>