Html 使用行号CSS后为RTL内容添加填充

我使用下面的CSS代码向表行添加行号：

table {
    direction: rtl;
    counter-reset: line-number;
}

td:first-child {
    text-align: right !important;
}

td:first-child:before {
    content: counter(line-number) ".";
    counter-increment: line-number;
    padding-right: 0.3em;
    color: lightgray;
}

但它的内容在第十行之后没有对齐。见下图：

但我想要这样的东西：

<input type="checkbox"> <div class="number">10</div>

我也尝试添加

填充

，但这不是一个有效的解决方案

如何解决这个问题

---

这是我的now。

请确保将数字放入元素中，如下所示：

<input type="checkbox"> <div class="number">10</div>

---

这样，它们与相同，并且不需要根据数字的位数进行有趣的填充。

确保将数字放入元素中，如下所示：

<input type="checkbox"> <div class="number">10</div>

---

这样一来，它们与相同，并且您不需要根据数字的位数进行有趣的填充。

您可以设置

td:first child:before

的

min width

td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}

---

您可以设置

td:first child:before

的

min width

td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}

---

你在说什么？这是按计划进行的，不是吗？由于额外的数字，数字10将比9占据更多的空间。我不知道你想说什么。对不起，我的英语不好。我想对齐上面的复选框（或使用行号时的其他内容）@Ruddy我在问题中添加了新图像。我还添加了fiddle：你在说什么？这是按计划进行的，不是吗？由于额外的数字，数字10将比9占据更多的空间。我不知道你想说什么。对不起，我的英语不好。我想对齐上面的复选框（或使用行号时的其他内容）@Ruddy我在我的问题中添加了新图像。我还添加了fiddle：不幸的是

min width

对我不起作用。我还添加了fiddle-see-it：使用更新的css:

minwidth:20px
显示：内联块。不幸的是，
最小宽度
对我不起作用。我还添加了fiddle-see-it：使用更新的css:
minwidth:20px
显示：内联块。