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


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

Кратко о внедрение зависимостей и сервис контейнере

Cтатья о том, что такое "Внедрение зависимостей" и "Сервис-контейнер" отталкиваясь от их реализации в PHP фреймворках. Статья написана по мотивам статей Фабьена Потенсье, ведущиго разработчика и идеолога фреймворка Symfony, а также документации фреймворка Laravel.

Windows 10. Меню пуск не открывается

В статье рассказывается как в операционной системе Windows 10 починить меню пуск, которое не открывается. Проблема решается с помощью переустановки Windows Apps.

Про развитие языков программирования

Типизация приносит производительность. И если раньше эта производительность была направлена на создание более быстрого кода, то сейчас на более быстрое написание кода.