Делаем нумерованные ячейки в таблице с помощью CSS

О чем материал ?

В данном материале мы рассмотрим простое решение, которое позволит вам пронумеровать ячейки td и tr в таблицах с помощью CSS. Данное решение подразумевает именно автоматику чтобы не нумеровать все ячейки вручную.

Как настроить нумерованные ячейки в таблице с помощью 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;
}

Это решение идет для всех  tr ячеек подряд, что будут использоваться в таблице.

Как настроить нумерацию лишь для выбранных ячеек tr в таблице ?

Как это настроили мы, создали отдельный класс для ячеек tr, например numtr далее в таблице к каждому tr добавляем созданный класс, например у нас есть таблица:

<table border="1" cellpadding="1" cellspacing="1" style="width:100%;">
    <tbody>
        <tr class="numtr">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="numtr">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="numtr">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table> 

Как видите обычный tr мы заменили на:

<tr class="numtr">

далее исправляем стили выше например на:

 table {
 counter-reset: rowNumber;
}

table tbody tr.numtr {
 counter-increment: rowNumber;
}

table tr.numtr td:first-child::before {
 content: counter(rowNumber) ").";
 min-width: 1em;
 margin-right: 0.5em;
}

и готово, ячейки для которых мы прописали класс numtr будут номерованы по порядку по всей таблице.

Как эти стили работают на конкретном примере ?

Наглядный пример можно увидеть на изображении немного ниже, первым пунктом в первой колонке идет нумерация, это работа наших стилей.

Примечание! Рекомендуем к прочтению: https://webref.ru/css/counter-reset