To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function.
<style type="text/css">tbody tr { counter-increment: rownum; } tbody { counter-reset: rownum; } table.name td.row:before { content: counter(rownum); }
</style>This code will apply counter to the table(class='name') and column (class='row')
Code
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing counters</title> <style type="text/css"> tbody tr { counter-increment: rownum; } tbody { counter-reset: rownum; } table.name td.row:before { content: counter(rownum); } </style> </head> <body> <table class="name"> <thead> <tr> <td>#</td> <td>Item</td> <td>Description</td> </tr> </thead> <tbody> <tr> <td class="row"></td> <td>Mac</td> <td>Apple</td> </tr> <tr> <td class="row"></td> <td>Windows</td> <td>Microsoft</td> </tr> <tr> <td class="row"></td> <td>Ubuntu</td> <td>Linux</td> </tr> <tr> <td class="row"></td> <td>Sun Solaris</td> <td>Sun</td> </tr> </tbody> </table> </body> </html>
Preview before sorting
Preview after sorting
Benefits
If you are using programmatic counters created using php or asp.net, and you apply table sorters the counter column also gets sorted. In some cases it does not matter but if it does then you can use the css counter because table sorters have no effect on them.
No comments:
Post a Comment