How to make a ruler scale in HTML and CSS

Here are some CSS on-screen rulers in a fiddle :-p There are probably better/fancier ways to set the spacing, but I included a simple example that loops through and adjusts the salient values.

I try never to preach using tables for non-tabular data, but you could just do it using a table:

<table width=100% style='font-family: monospace;'>
    <tr style='border-bottom: 1px solid #000;'>
        <td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td width=1%>
            |
        </td>
    </tr>
    <tr>
        <td>
            0
        </td><td>
            1
        </td><td>
            2
        </td><td>
            3
        </td><td>
            4
        </td>
    </tr>
</table>

A fiddle: http://jsfiddle.net/ZH7Lx/

Here is a good example:

<label>0</label>
<label>100</label>
<label>200</label>
       ...

https://codepen.io/cfenzo/pen/jEGQGm

or another example

https://codepen.io/pbweb/pen/grQKEK