我试图在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>
答案 0 :(得分：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>
答案 1 :(得分：1)