Нумерация строк таблицы через CSS
table {
counter-reset: rowNumber;
}
table tbody tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
counter-reset
устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов ::after и ::before.
counter-increment
предназначено для увеличения значения счётчика. Такой счётчик подсчитывает количество отображений элементов на странице. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.