generate serial number using css

Tags

, , , ,


Demo

HTML :

<table border=”1″ class=”Serialnumber”>
<thead>
<tr>
<th>Automatic Serial number</th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<!–leave it blank–>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td>
<tr
</tbody>
</table>

CSS:

<style type=”text/css”>
body
{
counter-reset: Serial; /* Set the Serial counter to 0 */
}

table
{
border-collapse: separate;
}

.auto-index tr td:first-child:before
{
counter-increment: Serial; /* Increment the Serial counter */
content:counter(Serial); /* Display the counter */
}
</style>

 

Demo

Advertisements