爲什麼我的表格中的圓形單元格大小不同？

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，所以我用一個類來代替。

嘗試使用

MDN Link

固定： 表和列的寬度是由表和col 元素的寬度，或通過細胞的第一行的寬度設置。 中的單元格不會影響列寬。

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>

Answer 2

一種解決方案是使用calc()：

table { 
 
    height: 320px; 
 
    width: calc(175px + 50%);/*here use calc*/ 
 
} 
 
#whitecircle { 
 
    background-color: white; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
td { 
 
    background-color: red; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<table cellspacing="10" cellpadding="10"> 
 
    <tr> 
 
    <td id="whitecircle">Mon</td> 
 
    <td id="whitecircle">Tue</td> 
 
    <td id="whitecircle">Wed</td> 
 
    <td id="whitecircle">Thu</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>

參考

calc()