使表格单元格高度相等

时间：2017-02-01 22:45:31

标签： css html5 html-table

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

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

该表由javascript生成，但我为此示例添加了默认的6x6表。这意味着这是生成表格后Index文档的样子。

1 个答案:

答案 0 :(得分：0)

只使用一组<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>
相关问题
最新问题