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

Question

我试图在 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>

Answer 1

添加table-layout: fixed至 <table>

CSS

table{
     table-layout: fixed;
}

DEMO HERE