Автоматическая нумерация строк таблицы 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;
}
.w3 {width:3%};
HTML
Всё, что нужно сделать в HTML таблице для запуска счёта - это
задать класс countLines.
Для простоты - создадим пустые теги td в начале каждой строки - именно
там и будут расположены номера строк.
<table class="tcont w100 evenrows countLines">
<caption>
Интересные статьи:
</caption>
<tr>
<td class="w3"></td>
<td>
Introduction
</td>
</tr>
<tr>
<td></td>
<td>
Installation
</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
Начать не с нуля
To начать с какого-то определённого номера нужно сперва создать
класс в CSS.
Предположим, что мы считаем число строк в параграфе p а счётчиком
выступает тег code. Это реальный пример которым я пользуюсь в том числе
и на этой странице. Все строки в параграфах «Ваш код»
пронумерованы таким способом.
CSS:
code {
counter-increment: line;
}
.incFr193 {counter-increment: line 193;}
Используем этот класс
HTML:
<p class="somecode p2 incFr193">
<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
| Обтекание одного блока другим | |
| Псевдоэлемент before в виде стрелки |
- Search on this website
- aofeed - Telegram channel for updates
- aofeedchat - Telegram group for questions
|
Share in social media:
|