我有一个html表格布局，我需要对齐数字字符串，但有些不存在。简单的例子如下
例1：好的
01234567890123456789
4321
437652
例2：好的
0123456789
4321
437652
例3：不行（左边的间隙）
0123456789
4321
437652
最初我正确地将数据对齐在列中，但是我的客户端不喜欢它，好像有一个少于20个字符的例子，那么它在左边留下了很大的空白。
我尝试用qazxsw poi填充缺少的角色，但它甚至不接近qazxsw poi
有没有办法在html中给每个角色一个固定的宽度或更好的方法来做到这一点？
最好的解决方案是坚持你最初的 的想法，因为你不需要经历这个想法的麻烦，你可以添加一个小的概念，将缩小你的列以适应列的内容，请参考从我得到想法的See fiddle，所以我们可以将第二列设置为100％宽度，第一列将缩小以适合内容。如果这可以解决您的问题，请告诉我们！
text-align:rightlink
对我来说，这是一个明显的例子，flexbox可以帮助你。您需要做的是为这些条目创建一个容器包装器并将其设置为
.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%; }通过这样做，你将元素放在每一行上。现在所谓的主轴将是垂直轴，因为您有一个列设置。
在此之后，您需要告诉您的元素与flex端对齐（意味着在您的情况下右侧）。
所以，如果你这样做
<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>它会将元素推向右侧
你可以看看.container {
display: flex;
flex-direction: column;
}
快速参考