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

Question

我试图让我表格中的所有单元格都具有相同大小的圆圈。我使用了边框半径，并为它们提供了相同的设置宽度、高度、边距等。我可能会过度查看我的代码中的某些内容，但如果有人能弄清楚这将有很大帮助!

我的表格 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>

表格的 CSS:

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

这是一个网页设计作业，因此我要尽量准确:)

Answer 1

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

尝试使用 table-layout: fixed;

MDN Link

fixed : Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

JSfiddle Demo

table {
    height: 320px;
    width: 400px;
    table-layout: fixed;
}
.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;
}

<table cellspacing="10" cellpadding="10">
    <tr>
        <td class="whitecircle">Mon</td>
        <td Class="whitecircle">Tue</td>
        <td class="whitecircle">Wed</td>
        <td class="whitecircle">Thur</td>
        <td class="whitecircle">Fri</td>
        <td class="whitecircle">Sat</td>
        <td class="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>