Бывают ситуации когда нужно создать таблицу с пронумерованными строками. Первое что приходит в голову — использовать нумерованный список. Здесь вся проблема в том что если и удастся добиться желаемого результата, то мы получим код, несоответствующий стандарту. Можно, конечно, и вручную пронумеровать все строки, но такую таблицу будет сложно поддерживать.
Нашёл более изящное решение.
В спецификации CSS версии 2 и младше есть свойство counter-increment. Можно воспользоваться им.
Для этого набросаем небольшую таблицу
<table class="OL">
<tr>
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Стоимость (руб.)</th>
</tr><tr>
<td></td>
<td>Ручка шариковая</td>
<td>63.00</td>
</tr><tr>
<td></td>
<td>Вода минеральная</td>
<td>80.00</td>
</tr><tr>
<td></td>
<td>USB-Flash накопитель 128 ГБ</td>
<td>2 300.00</td>
</tr>
</table>и правила отображения:
<style>
table.OL {counter-reset: count;}
table.OL td:first-child:before{
content: counter(count);
counter-increment: count;
}
td,th {border: 1px solid black;}
</style>В результате чего получаем:
№ п/п | Наименование товара | Стоимость (руб.) |
|---|---|---|
Ручка шариковая | 63.00 | |
Вода минеральная | 80.00 | |
USB-Flash накопитель 128 ГБ | 2 300.00 |
У данного способа только 1 недостаток. При копировании такой таблицы номера строк скопированы не будут.
Обновление от 15 марта 2024:
Наткнулся на аналогичное описание нумирации строк в таблце при помощи CSS с большим количеством разнообразных примеров: Автоматическая нумерация строк таблицы | CSS
