Html 为什么我的表格中的圆形单元格大小不同？

我想把我桌子上的所有细胞都做成同样大小的圆圈。我使用了边界半径，我给了他们所有相同的设置宽度、高度、边距等。我可能在我的代码中寻找了一些东西，这使得这一切发生，但如果有人能找到它将是非常有帮助的

表格的我的html：

<table cellspacing="10" cellpadding="10">
<tr>
<td id="whitecircle">Mon</td>
<td id="whitecircle">Tue</td>
<td id="whitecircle">Wed</td>
<td id="whitecircle">Thur</td>
<td id="whitecircle">Fri</td>
<td id="whitecircle">Sat</td>
<td id="whitecircle">Sun</td>
</tr>   

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>

<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>

<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

table{
height: 320px;
width: 400px;
}

#whitecircle {
background-color: white;
text-align: center;
border-radius: 50%;
height: 10px;
width: 10px;}

td {background-color: red;
border-radius: 50%;
text-align: center;
height: 10px;
width: 10px;}

---

这是一个网页设计作业，因此我试图准确地回答：）

一个解决方案是使用

calc（）

：

表格{
高度：320px；
宽度：计算（175px+50%）；/*此处使用计算*/
}
#白圈{
背景色：白色；
文本对齐：居中；
边界半径：50%；
高度：10px；
宽度：10px；
}
运输署{
背景色：红色；
边界半径：50%；
文本对齐：居中；
宽度：50px；
高度：50px；
}

周一
星期二
结婚
清华大学
星期五
坐
太阳
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

首先，您不能在页面上重复使用ID，因此我使用了一个类

尝试使用

表格布局：固定


已修复：
表和列宽由表和列的宽度设置
元素或按第一行单元格的宽度。细胞
后续行不影响列宽



表格{
高度：320px；
宽度：400px；
表布局：固定；
}
白圈先生{
背景色：白色；
文本对齐：居中；
边界半径：50%；
高度：10px；
宽度：10px；
}
运输署{
背景色：红色；
边界半径：50%；
文本对齐：居中；
高度：10px；
宽度：10px；
}

周一
星期二
结婚
星期四
星期五
坐
太阳
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
…一份网页设计作业建议您为此使用表格！？此外，您不能重复使用ID。每页只能使用一次。很遗憾，他们这样做了：/不要使用表格，并解释原因，以获得额外分数。如果这是为了作业，你不应该自己做吗？@DRD你的权利，但我在过去的两个小时里一直在阅读我的笔记和摆弄代码，但不明白为什么我的细胞大小不同，所以需要外界的帮助！很好的一个@Paulie_D+1谢谢你Paulie这也行！我从来都不知道身份证的事，从现在起我会记住的