css - 给表格单元格相同的高度

Question

我正在尝试制作一个行数和列数未知的方表。表格应始终为 90% 的屏幕宽度并具有相同的高度，但当我为表格提供正确的高度时，只有顶行会重新缩放。

.interface div {
  display: inline-block;
  width: 30%;
  text-align: center;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}
.interface {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
  padding: 10px;
}
#board {
  width: 90vw;
  height: 90vw;
  table-layout: fixed;
}
.boardSpace {
  border-radius: 10px;
  border: 5px solid black;
}

<table id="board">
  <tbody>
    <tr id="boardRow0">
      <td id="boardSpace0" class="boardSpace" onclick="placeBlock(0, 0)">0</td>
      <td id="boardSpace1" class="boardSpace" onclick="placeBlock(1, 0)">1</td>
      <td id="boardSpace2" class="boardSpace" onclick="placeBlock(2, 0)">2</td>
      <td id="boardSpace3" class="boardSpace" onclick="placeBlock(3, 0)">3</td>
      <td id="boardSpace4" class="boardSpace" onclick="placeBlock(4, 0)">4</td>
      <td id="boardSpace5" class="boardSpace" onclick="placeBlock(5, 0)">5</td>
    </tr>
  </tbody>
  <tbody>
    <tr id="boardRow1">
      <td id="boardSpace6" class="boardSpace" onclick="placeBlock(0, 1)">6</td>
      <td id="boardSpace7" class="boardSpace" onclick="placeBlock(1, 1)">7</td>
      <td id="boardSpace8" class="boardSpace" onclick="placeBlock(2, 1)">8</td>
      <td id="boardSpace9" class="boardSpace" onclick="placeBlock(3, 1)">9</td>
      <td id="boardSpace10" class="boardSpace" onclick="placeBlock(4, 1)">10</td>
      <td id="boardSpace11" class="boardSpace" onclick="placeBlock(5, 1)">11</td>
    </tr>
  </tbody>
  <tbody>
    <tr id="boardRow2">
      <td id="boardSpace12" class="boardSpace" onclick="placeBlock(0, 2)">12</td>
      <td id="boardSpace13" class="boardSpace" onclick="placeBlock(1, 2)">13</td>
      <td id="boardSpace14" class="boardSpace" onclick="placeBlock(2, 2)">14</td>
      <td id="boardSpace15" class="boardSpace" onclick="placeBlock(3, 2)">15</td>
      <td id="boardSpace16" class="boardSpace" onclick="placeBlock(4, 2)">16</td>
      <td id="boardSpace17" class="boardSpace" onclick="placeBlock(5, 2)">17</td>
    </tr>
  </tbody>
  <tbody>
    <tr id="boardRow3">
      <td id="boardSpace18" class="boardSpace" onclick="placeBlock(0, 3)">18</td>
      <td id="boardSpace19" class="boardSpace" onclick="placeBlock(1, 3)">19</td>
      <td id="boardSpace20" class="boardSpace" onclick="placeBlock(2, 3)">20</td>
      <td id="boardSpace21" class="boardSpace" onclick="placeBlock(3, 3)">21</td>
      <td id="boardSpace22" class="boardSpace" onclick="placeBlock(4, 3)">22</td>
      <td id="boardSpace23" class="boardSpace" onclick="placeBlock(5, 3)">23</td>
    </tr>
  </tbody>
  <tbody>
    <tr id="boardRow4">
      <td id="boardSpace24" class="boardSpace" onclick="placeBlock(0, 4)">24</td>
      <td id="boardSpace25" class="boardSpace" onclick="placeBlock(1, 4)">25</td>
      <td id="boardSpace26" class="boardSpace" onclick="placeBlock(2, 4)">26</td>
      <td id="boardSpace27" class="boardSpace" onclick="placeBlock(3, 4)">27</td>
      <td id="boardSpace28" class="boardSpace" onclick="placeBlock(4, 4)">28</td>
      <td id="boardSpace29" class="boardSpace" onclick="placeBlock(5, 4)">29</td>
    </tr>
  </tbody>
  <tbody>
    <tr id="boardRow5">
      <td id="boardSpace30" class="boardSpace" onclick="placeBlock(0, 5)">30</td>
      <td id="boardSpace31" class="boardSpace" onclick="placeBlock(1, 5)">31</td>
      <td id="boardSpace32" class="boardSpace" onclick="placeBlock(2, 5)">32</td>
      <td id="boardSpace33" class="boardSpace" onclick="placeBlock(3, 5)">33</td>
      <td id="boardSpace34" class="boardSpace" onclick="placeBlock(4, 5)">34</td>
      <td id="boardSpace35" class="boardSpace" onclick="placeBlock(5, 5)">35</td>
    </tr>
  </tbody>
</table>

该表是由 javascript 生成的，但我在此示例中放入了默认的 6x6 表。这就是生成表格后索引文档的样子。

Answer 1

尝试只使用一个 <tbody></tbody>标签集。

    <table id="board">
        <tbody>
            <tr id="boardRow0">
                <td id="boardSpace0" class="boardSpace" onclick="placeBlock(0, 0)">0</td>
                <td id="boardSpace1" class="boardSpace" onclick="placeBlock(1, 0)">1</td>
                <td id="boardSpace2" class="boardSpace" onclick="placeBlock(2, 0)">2</td>
                <td id="boardSpace3" class="boardSpace" onclick="placeBlock(3, 0)">3</td>
                <td id="boardSpace4" class="boardSpace" onclick="placeBlock(4, 0)">4</td>
                <td id="boardSpace5" class="boardSpace" onclick="placeBlock(5, 0)">5</td>
            </tr>
            <tr id="boardRow1">
                <td id="boardSpace6" class="boardSpace" onclick="placeBlock(0, 1)">6</td>
                <td id="boardSpace7" class="boardSpace" onclick="placeBlock(1, 1)">7</td>
                <td id="boardSpace8" class="boardSpace" onclick="placeBlock(2, 1)">8</td>
                <td id="boardSpace9" class="boardSpace" onclick="placeBlock(3, 1)">9</td>
                <td id="boardSpace10" class="boardSpace" onclick="placeBlock(4, 1)">10</td>
                <td id="boardSpace11" class="boardSpace" onclick="placeBlock(5, 1)">11</td>
            </tr>
            <tr id="boardRow2"><td id="boardSpace12" class="boardSpace" onclick="placeBlock(0, 2)">12</td>
                <td id="boardSpace13" class="boardSpace" onclick="placeBlock(1, 2)">13</td>
                <td id="boardSpace14" class="boardSpace" onclick="placeBlock(2, 2)">14</td>
                <td id="boardSpace15" class="boardSpace" onclick="placeBlock(3, 2)">15</td>
                <td id="boardSpace16" class="boardSpace" onclick="placeBlock(4, 2)">16</td>
                <td id="boardSpace17" class="boardSpace" onclick="placeBlock(5, 2)">17</td>
            </tr>
            <tr id="boardRow3">
                <td id="boardSpace18" class="boardSpace" onclick="placeBlock(0, 3)">18</td>
                <td id="boardSpace19" class="boardSpace" onclick="placeBlock(1, 3)">19</td>
                <td id="boardSpace20" class="boardSpace" onclick="placeBlock(2, 3)">20</td>
                <td id="boardSpace21" class="boardSpace" onclick="placeBlock(3, 3)">21</td>
                <td id="boardSpace22" class="boardSpace" onclick="placeBlock(4, 3)">22</td>
                <td id="boardSpace23" class="boardSpace" onclick="placeBlock(5, 3)">23</td>
            </tr>
            <tr id="boardRow4">
                <td id="boardSpace24" class="boardSpace" onclick="placeBlock(0, 4)">24</td>
                <td id="boardSpace25" class="boardSpace" onclick="placeBlock(1, 4)">25</td>
                <td id="boardSpace26" class="boardSpace" onclick="placeBlock(2, 4)">26</td>
                <td id="boardSpace27" class="boardSpace" onclick="placeBlock(3, 4)">27</td>
                <td id="boardSpace28" class="boardSpace" onclick="placeBlock(4, 4)">28</td>
                <td id="boardSpace29" class="boardSpace" onclick="placeBlock(5, 4)">29</td>
            </tr>
            <tr id="boardRow5">
                <td id="boardSpace30" class="boardSpace" onclick="placeBlock(0, 5)">30</td>
                <td id="boardSpace31" class="boardSpace" onclick="placeBlock(1, 5)">31</td>
                <td id="boardSpace32" class="boardSpace" onclick="placeBlock(2, 5)">32</td>
                <td id="boardSpace33" class="boardSpace" onclick="placeBlock(3, 5)">33</td>
                <td id="boardSpace34" class="boardSpace" onclick="placeBlock(4, 5)">34</td>
                <td id="boardSpace35" class="boardSpace" onclick="placeBlock(5, 5)">35</td>
            </tr>
        </tbody>
    </table>