Auto numeración de tablas con CSS

HTML
<table class="table auto-count">
    <thead>
        <tr>
            <th> Number </th>
            <th> Description </th>
            <th> Additional </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>[BTN]</td>
        </tr>
        <tr>
            <td></td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>[BTN]</td>
        </tr>
        <tr>
            <td></td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>[BTN]</td>
        </tr>
    </tbody>
</table>
CSS
table.auto-count
{
	counter-reset: rowNumber;
}

table.auto-count>tbody>tr
{
	counter-increment: rowNumber;
}

table.auto-count>tbody>tr>th:first-child::before,
table.auto-count>tbody>tr>td:first-child::before
{
	content: counter(rowNumber);
}

Autor: JossMP

Publicado: 03/12/2018

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentarioComentarios 1

denz Hace 7 años
Está interesante la numeración con css. Sigue así amigo
1 0 | Responder | Reportar spam