Question

我有一个html表格布局，我需要对齐数字字符串，但有些不存在。下面的简单例子

示例1：确定

01234567890123456789
                4321
              437652

示例2：确定

0123456789
      4321
    437652

示例3：不确定（左侧为间隙）

      0123456789
            4321
          437652

最多20个字符
字符总是0到9

最初我在列中右对齐数据，但我的客户不喜欢它，好像有一个少于20个字符的例子，那么它在左边留下了很大的空隙。

我尝试用 填补失踪的角色，但它甚至没有关闭See fiddle

有没有办法在html中给每个角色一个固定的宽度或更好的方法来做到这一点？

Answer 1

对我而言，这是一个明显的例子，flexbox可以帮助你。您需要做的是为这些条目创建一个容器包装器并将其设置为

.container { 
    display: flex;
    flex-direction: column;
}

通过这样做，你将元素放在每一行上。现在所谓的主轴将是垂直轴，因为您有一个列设置。

在此之后，您需要告诉您的元素与flex端对齐（意味着在您的情况下是右侧）。

所以，如果你这样做

.container { 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

它会将元素推向右侧

您可以查看here以获得快速参考

Answer 2

最好的解决方案是坚持text-align:right的原始想法，因为你不需要经历这个想法的麻烦，你可以添加一个小的概念，缩小你的列以适应该列的内容，请参考我所知的link，因此我们可以将第二列设置为100％宽度，第一列将缩小以适合内容。如果这可以解决您的问题，请与我们联系！

.popUpBox1Table td {
  text-align: right;
  white-space:nowrap;
}

.popUpBox1Table {
  border: 1px solid black;
  background-color: #FFFFB0;
  font-family: Calibri;
  font-size: 14px;
  width: 500px;
  padding: 3px;
}

.popUpBox1Table td:empty:after {
  content: "\00a0";
}

.rightalignPopUp1 {
  text-align: right;
}

.redPopUp1 {
  color: red;
}

.bluePopUp1 {
  color: #002060;
}

.greenPopUp1 {
  color: #385623;
}

.brownPopUp1 {
  color: #833c0b;
}
.grow { width: 100%; }

<body>

  <table cellspacing="0" cellpadding="0" border="1" class="popUpBox1Table">
    <tr>
      <th>values</th>
      <th class="grow">dummy</th>
    </tr>
    <tr>
      <td><span class="bluePopUp1">7</span><span class="redPopUp1">6</span><span class="bluePopUp1">3</span></td>
      <td class="rightalignPopUp1"></td>
    </tr>

    <tr>
      <td><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span>
        <span
        class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span><span class="redPopUp1">6</span>
          <span
          class="bluePopUp1">7</span><span class="redPopUp1">6</span><span class="bluePopUp1">3</span></td>
      <td class="rightalignPopUp1"></td>
    </tr>

  </table>

</body>

在html中将字符与固定宽度对齐

2 个答案: