🏠 | 💻  IT | CSS |

Автоматическая нумерация строк таблицы HTML CSS

Пронумеровать строки HTML таблицы можно с помощью псевдоклассов CCS.

Пример

CSS

Счётчик, который будет отвечать за номера строк назовём trCount.

Увеличивать значения этого счётчика будет каждый первый td элемент любой строки.

Позиционирование сделаем relative. Если у Вас есть предложения по улучшению моего метода - добро пожаловать в комментарии к статье.

.countLines { counter-reset: trCount; overflow: auto; white-space: nowrap; } .countLines tr td:first-child:before { position:relative; counter-increment: trCount; content:counter(trCount); color:#1d1f21; background:#c5c8c6; } .width3 {width:3%};

HTML

Всё, что нужно сделать в HTML таблице для запуска счёта - это задать класс countLines.

Для простоты - создадим пустые td в начале каждой строки - именно там и будут расположены номера строк.

<table class="tOfContents width100 evenrows countLines"> <caption> Интересные статьи: </caption> <tr> <td class="width3"></td> <td> Введение </td> </tr> <tr> </td> <td> Установка </td> </tr> <tr> </td> <td> Инструкции для Gulp (Gulpfile.js) </td> </tr> <tr> </td> <td> Организация файлов </td> </tr> <tr> </td> <td> Обработка файлов стилей в SASS </td> </tr> <tr> </td> <td> Мониторинг изменений (gulp-watch) </td> </tr> <tr> </td> <td> Gulp и PostCSS </td> </tr> <tr> </td> <td> Видеоуроки Gulp </td> <tr> </td> <td> Разбор ошибок </td> </tr> <tr> </td> <td> did you forget to signal async completion? </td> </tr> </table>

Посмотреть на результат Вы можете на странице Gulp

Начать не с нуля

Чтобы начать с какого-то определённого номера нужно сперва создать класс в CSS.

Предположим, что мы считаем число строк в параграфе p а счётчиком выступает тег code. Это реальный пример которым я пользуюсь в том числе и на этой странице. Все строки в параграфах «Ваш код» пронумерованы таким способом.

CSS:

code { counter-increment: line; } .incrementFrom193 {counter-increment: line 193;}

Используем этот класс

HTML:

<p class="somecode width100 m-top3rem incrementFrom193"> <code>inputElement = driver.find_element_by_id(inputElementId) </code"> <code>inputElement.send_keys("C:<span class="orange">\\</span>Users<span class="orange">\\</span>username<span class="orange">\\</span>Documents<span class="orange">\\</span>Projects<span class="orange">\\</span>projectName<span class="orange">\\</span>products_to_import-ANSI.csv") </code"> </p>

Результат:

inputElement = driver.find_element_by_id(inputElementId) inputElement.send_keys("C:\\Users\\username\\Documents\\Projects\\projectName\\products_to_import-ANSI.csv")

Посмотреть на статью, в которой я применил это впервые Вы можете на странице Selenium Python

Статьи о CSS
Обтекание одного блока другим
Псевдоэлемент before в виде стрелки

Если остались вопросы - смело задавайте их в комментариях.

Поиск по сайту
Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: