使用后为 RTL 内容添加填充 row_number CSS

Question

我使用下面的 CSS 代码将行号添加到 table 行：

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

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

但我想要这样的东西：

我也尝试添加 padding 但它不是一个可行的解决方案。

如何解决这个问题？

这是我现在的Fiddle。

Answer 1

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

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

然后您可以设置该元素的样式，使其具有最小宽度：

.number {
   min-width:20px;
}

这样他们有相同的方式，你不需要搞笑 padding 取决于数字有多少位。

Answer 2

您可以设置 min-width 个 td:first-child:before 个。

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

使用后为 RTL 内容添加填充 row_number CSS

add padding for RTL content after use row_number CSS

html

css

cellpadding

css-tables

css-counter