Geben Sie Tabellenzellen die gleiche Höhe

Question

Ich versuche, eine quadratische Tabelle mit einer unbekannten Anzahl von Zeilen und Spalten zu erstellen. Der Tisch sollte immer 90% Bildschirmbreite haben und eine gleiche Höhe haben, aber wenn ich dem Tisch die richtige Höhe gebe, wird nur die oberste Reihe neu skaliert.

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

Die Tabelle von Javascript erzeugt wird, aber ich habe die 6x6-Tabelle Standard für dieses Beispiel in. Dies bedeutet, dass das Indexdokument nach dem Generieren einer Tabelle aussieht.

Answer 1

Versuchen Sie nur mit einem <tbody></tbody> Satz von Tags.

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