Счетчик строк таблицы html

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

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

Пример

CSS

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

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

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

HTML

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

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

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

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

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

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

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

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

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

Источник

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

Как сделать, чтобы в ячейках первого столбца был порядковый номер 1,2,3. строки

  Первая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Вторая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка 

Что нужно сделать, чтобы в нескольких HTML-таблицах не прерывалась нумерация строк

 .demotable < counter-reset: schetchik; >.demotable table < border-collapse: collapse; >.demotable tr < counter-increment: schetchik; >.demotable td, .demotable tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tr:before Первая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Вторая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка 

Как сделать подпункты во вложенных таблицах

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tr < counter-increment: schetchik; >.demotable td, .demotable tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tr:before  вторая ячейка третья ячейка вторая ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейка третья ячейка 

   вторая ячейка третья ячейка вторая ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейка третья ячейка 

Как вывести итоговое количество строк таблицы

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody tr < counter-increment: schetchik; /* сосчитать только tr в tbody */ > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

Как изменить начальное значение счётчика

 .demotable < border-collapse: collapse; counter-reset: schetchik 7; > .demotable tbody tr < counter-increment: schetchik; >.demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

Подсчёт в обратном порядке

 .demotable < border-collapse: collapse; counter-reset: schetchik 7; /* нужно знать общее количество */ > .demotable tbody tr < counter-increment: schetchik -1; > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody < display: flex; flex-flow: column-reverse nowrap; > .demotable tbody tr < display: flex; flex: 1; counter-increment: schetchik; > .demotable tbody td .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody tr < counter-increment: schetchik 2; > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody tr < counter-increment: schetchik 1; >.demotable tbody tr.raz2 < counter-increment: schetchik 7; > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

   Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

   Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика):