简单的HTML标尺双倍间距修复

Question

我试图在HTML中实现一个非常简单的标尺，但是当我在其中添加更多数字字符时，我在间距方面存在问题，例如，注意（10）之后的间距。对我做错了什么的想法？

如果有一个更好的简单想法如何实现相同的目的，我将不胜感激。

JSFiddle：http://jsfiddle.net/qx0h22tj/

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用table-layout:fixed;解决您的问题吗？

table{table-layout:fixed;}

<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 2

将station_id添加到genre_station

<强> CSS

genre_id

<强> DEMO HERE