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

已修复：表和列宽度由table和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()：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>参考

calc()

为什么我桌子上的圆圈细胞大小不一？

2 个答案: