Automatic numbering of HTML CSS table rows
The HTML table can be numbered using CSS pseudo-classes.
Example
CSS
The counter that will be responsible for line numbers will be called trCount.
To increase the value of this counter will be every first tag td of any line.
Positioning will be relative. If you have any suggestions for improving my method, you are welcome in the article comments.
.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
All you need to do in an HTML table to start counting is to set a class. countLines.
For simplicity, create empty tags. td at the beginning of each line,
That's where the line numbers are.
<table class="tcont w100 evenrows countLines">
<caption>
Interesting articles:
</caption>
<tr>
<td class="w3"></td>
<td>
Introduction
</td>
</tr>
<tr>
<td></td>
<td>
Installation
</td>
</tr>
<tr>
<td></td>
<td>
Gulp instructions (Gulpfile.js)
</td>
</tr>
<tr>
<td></td>
<td>
File organization
</td>
</tr>
<tr>
<td></td>
<td>
Processing style files in SASS
</td>
</tr>
<tr>
<td></td>
<td>
Monitoring changes (gulp-watch)
</td>
</tr>
<tr>
<td></td>
<td>
Gulp and PostCSS
</td>
</tr>
<tr>
<td></td>
<td>
Gulp video tutorials
</td>
<tr>
<td></td>
<td>
Error analysis
</td>
</tr>
<tr>
<td></td>
<td>
did you forget to signal async completion?
</td>
</tr>
</table>
You can see the results on the page. Gulp
Start from scratch
To start with a certain number, you must first create
CSS class.
Suppose we count the number of rows in paragraph p, with a tag acting as the counter. code. This is a real example I use, among other things.
And on this page. All lines in paragraphs «Your code»
numbered in this way.
CSS:
code {
counter-increment: line;
}
.incFr193 {counter-increment: line 193;}
Use this class.
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>
Result:
inputElement = driver.find_element_by_id(inputElementId)
inputElement.send_keys("C:\\Users\\username\\Documents\\Projects\\projectName\\products_to_import-ANSI.csv")
You can see the article where I first applied this on the page. Selenium Python
Article author: Andrei Olegovich