将字符对齐到html中的固定宽度答案

【问题标题】：Align characters to fixed width in html将字符对齐到html中的固定宽度
【发布时间】：2018-05-31 04:58:37
【问题描述】：

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

示例 1：好的

01234567890123456789
                4321
              437652

示例 2：好的

0123456789
      4321
    437652

示例 3：不 OK（作为左侧的间隙）

      0123456789
            4321
          437652

最多 20 个字符
字符始终为 0 到 9

最初我将一列中的数据右对齐，但我的客户不喜欢它，好像有一个少于 20 个字符的示例然后它在左侧留下了很大的空白。

我尝试用&nbsp; 填充缺失的字符，但它甚至不接近See fiddle

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

【问题讨论】：

我们可以修改 HTML 吗？比如说添加一个包装器 div？
你的表结构是什么？
这是一个 2 列的表，只有一些行包含在第二列中。主要结构是这样，但只有 2 行 jsfiddle.net/wpv2L07j/2
@NarenMurali - 是的。实际上，数据已经在 span 标签内为它们着色。
我在这里缺少什么？您想要的听起来像是表格的默认样式。 jsfiddle.net/ac56q127 当然，如果其中 1 个数字是 20 个字符宽，那么所有单元格都具有该宽度。但这是正确的，对吧？当使用第二列和 100% 表格宽度时：jsfiddle.net/ac56q127/1 通常，您可以使用等宽字体将其修复为 nbsp，但您需要在打印前找出最大的数字。

标签： html css

【解决方案1】：

最好的解决方案是坚持你最初的 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>

【讨论】：

@pathDongle 这个答案对你有帮助吗？您的问题解决了吗？

【解决方案2】：

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

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

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

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

如果你这样做了

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

它将元素推到右侧

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

【讨论】：