html - 简单的HTML标尺双间距修复

我试图在HTML中实现一个非常简单的标尺，但是当我在它加倍的地方添加更多的数字字符时，我在间距上遇到了问题，例如，注意（10）之后的间距。你知道我做错了什么吗？
另外，如果有一个更好的简单的想法如何实现相同的话，我将不胜感激。
JSFiddle:http://jsfiddle.net/qx0h22tj/

<table style="width: 920px; font-family: monospace;">
    <tr style="border-bottom: 1px solid #000;">
        <td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><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><td>
            5
        </td><td>
            6
        </td><td>
            7
        </td><td>
            8
        </td><td>
            9
        </td><td>
            10
        </td><td>
            11
        </td><td>
            12
        </td><td>
            13
        </td><td>
            14
        </td><td>
            15
        </td><td>
            16
        </td><td>
            17
        </td><td>
            18
        </td><td>
            19
        </td><td>
            20
        </td><td>
            21
        </td><td>
            22
        </td><td width="1%">
            23
        </td>
    </tr>
</table>

最佳答案

将table-layout: fixed添加到<table>
CSS

table{
     table-layout: fixed;
}

DEMO HERE