html - row_number CSS を使用した後に RTL コンテンツのパディングを追加する

Question

テーブルの行に行番号を追加するために、以下の 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;
}

しかし、それは10行目の直後にコンテンツが整列していません。下の画像を参照してください。

しかし、私はこのようなものが欲しい:

私も追加しようとpaddingしましたが、それは実用的な解決策ではありません。

これをどのように修正しますか？

これが私のフィドルです。

Answer 1

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