Нумерация строк таблицы через 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 предназначено для увеличения значения счётчика. Такой счётчик подсчитывает количество отображений элементов на странице. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.


Похожие записи

Полезные горчие клавиши Youtube

При просмотре роликов бывает хочется немного ускорить воспроизведение, для этого есть функция "скорость видео" в настройках ролика. Чтобы её включить не задействуя мышь нужно нажать "Shift + >" или "Shift + <" для ускорения и замедления соответственно. И еще некоторые горячие клавиши youtube:

Руководство по Markdown

Markdown - облегчённый язык разметки, созданный с целью написания максимально читаемого и удобного для правки текста, но пригодного для преобразования HTML и другие языки публикаций.