Question

是否有一种优雅的方式来格式化在HTML表格中右对齐的数字？

例如：

此：

0/0 Hz

10/600 Hz

1200/1200 HZ

应该是这样的：

   0 /    0 Hz

  10 /  600 Hz

1200 / 1200 HZ

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

Answer 1

这大约是你的意思吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我不知道你想要做什么是为了给表中文本的每个部分提供id /类。或者正如@Johannes所说的那样，把所有东西放在它自己的牢房里。

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

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

Answer 3

在这种情况下，优雅是非常非常主观的......

这取决于你是否要弄乱桌面单元格内的内容或弄乱你的桌子。这取决于如何填充此表。

我个人更喜欢不打造一个包含大量细胞的桌子，而且我绝对不喜欢让一个柱子充满/个。

我会在你的两个数据部分，即结束和总数之间进行跨越。这个的缺点是宽度设置是必要的。但好处是它没有使用表格来造型。

你的小提琴：https://jsfiddle.net/9183ao41/2/

选择你的毒药。

优雅的方式来格式化在HTML表格中右对齐的数字

3 个答案: