Автоматическая нумерация строк таблицы 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> Установка </td> </tr> <tr> <td></td> <td> Инструкции для Gulp (Gulpfile.js) </td> </tr> <tr> <td></td> <td> Организация файлов </td> </tr> <tr> <td></td> <td> Обработка файлов стилей в SASS </td> </tr> <tr> <td></td> <td> Мониторинг изменений (gulp-watch) </td> </tr> <tr> <td></td> <td> Gulp и PostCSS </td> </tr> <tr> <td></td> <td> Видеоуроки Gulp </td> <tr> <td></td> <td> Разбор ошибок </td> </tr> <tr> <td></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

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