user3594463 user3594463 - 1 year ago 67
HTML Question

Why are my circle cells in my table different sizes?

I'm trying to make all my cells in my table the same size circles. I've used border radius and I've given them all the same set width, height, margin etc. I could be over looking something in my code that is making this happen but if anyone can figure it out would be of great help!

My html for the table:

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


My CSS for the 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;}


This is for a web design assignment, hence why I'm trying to get it exact :)

Answer Source

Firstly, you can't re-use IDs on a page so I have used a class instead.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download