{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Заметки одного чудика: заметки с тегом CSS", "_rss_description": "Мелкие заметки по администрированию и не только. Используются в личных целях в качестве памятки", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/blog.gosvn.ru\/tags\/css\/", "feed_url": "https:\/\/blog.gosvn.ru\/tags\/css\/json\/", "icon": "https:\/\/blog.gosvn.ru\/pictures\/userpic\/userpic@2x.jpg?1671732771", "authors": [ { "name": "Александр", "url": "https:\/\/blog.gosvn.ru\/", "avatar": "https:\/\/blog.gosvn.ru\/pictures\/userpic\/userpic@2x.jpg?1671732771" } ], "items": [ { "id": "17", "url": "https:\/\/blog.gosvn.ru\/all\/malenkaya-hitrost-pri-rabote-s-html\/", "title": "Маленькая хитрость при работе с HTML", "content_html": "

Бывают ситуации когда нужно создать таблицу с пронумерованными строками. Первое что приходит в голову — использовать нумерованный список. Здесь вся проблема в том что если и удастся добиться желаемого результата, то мы получим код, несоответствующий стандарту. Можно, конечно, и вручную пронумеровать все строки, но такую таблицу будет сложно поддерживать.
\nНашёл более изящное решение.
\nВ спецификации CSS версии 2 и младше есть свойство counter-increment<\/a>. Можно воспользоваться им.
\nДля этого набросаем небольшую таблицу<\/p>\n

<table class="OL">\n<tr>\n    <th>№ п\/п<\/th>\n    <th>Наименование товара<\/th>\n    <th>Стоимость (руб.)<\/th>\n<\/tr><tr>\n    <td><\/td>\n    <td>Ручка шариковая<\/td>\n    <td>63.00<\/td>\n<\/tr><tr>\n    <td><\/td>\n    <td>Вода минеральная<\/td>\n    <td>80.00<\/td>\n<\/tr><tr>\n    <td><\/td>\n    <td>USB-Flash накопитель 128 ГБ<\/td>\n    <td>2 300.00<\/td>\n<\/tr>\n<\/table><\/code><\/pre>
и правила отображения:<\/p>\n
<style>\ntable.OL {counter-reset: count;}\ntable.OL td:first-child:before{\n    content: counter(count);\n    counter-increment: count;\n}\ntd,th {border: 1px solid black;}\n<\/style><\/code><\/pre>
В результате чего получаем:<\/p>\n