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

【问题标题】：Why are my circle cells in my table different sizes?为什么我的表格中的圆形单元格大小不同？
【发布时间】：2014-12-28 19:05:06
【问题描述】：

我正在尝试将我表格中的所有单元格设为相同大小的圆圈。我使用了边框半径，并且给了它们所有相同的设置宽度、高度、边距等。我可能会过度查看我的代码中导致这种情况发生的一些东西，但如果有人能弄清楚这将有很大帮助！

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

这是一个网页设计任务，因此我试图让它准确:)

【问题讨论】：

...一个网页设计任务建议您为此使用表格！？此外，您不能重复使用 ID...每页只能使用一次。
不幸的是他们做到了：/
不要使用表格，并解释原因，以获得加分。
如果这是作业，你不应该自己做吗？
@DRD 你说得对，但过去 2 小时我一直在阅读我的笔记并摆弄代码，但无法弄清楚为什么我的单元格大小不同，因此需要寻求外部帮助！

标签： html css html-table geometry cells

【解决方案1】：

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

尝试使用table-layout: fixed;

MDN Link

固定：表格和列的宽度由表格和列的宽度设置元素或第一行单元格的宽度。细胞在后续行不影响列宽。

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>

【讨论】：

不错的@Paulie_D +1
谢谢 Paulie 这也有效！从来不知道ID标签，从现在开始我会记住的

【解决方案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()

【讨论】：