如何防止动态表格增长超过定义的高度？

Question

我试图代表一个简单的游戏板来实现“Flood it”游戏，它由一个由 m 矩阵表示的表格组成，表格的内容是使用 javascript 函数动态设置的。

我写了这段CSS：

html, body {

    height: 100%;

}

table {

    border-style: solid;

    width: 30%;

}

td {

    position: relative;

    border-style: solid;

}

td:after {

    content: "";

    display: block;

    padding-bottom: 100%;

}

div#game_board_container {

    display: block;

    height: 50%;

    background-color: red;

}

div.cell_content {

    position: absolute;

    display: flex;

    width: 100%;

    height: 100%;

    justify-content: center;

    align-items: center;

}

它用于定义一些 html 的布局，可以简化为：

<div id="game_board_container">

    <table id="game_board">

    <table>

</div>

更新后，表行看起来就像<tr><td><div class="cell_content"></div></td>....</tr>每行 m 个 div，每个表 n 行。

css适用于n×n和n×m矩阵，其中n<m（列多于行），我得到一个漂亮的正方形或矩形矩阵，其中正方形单元格的大小根据css定义受宽度限制；

但是当 n > m 时，行会朝页面底部堆叠；我知道这是由于我使用“响应式方形设计”将我的单元格定义为方形而引起的，而且我的表格尺寸仅由其宽度定义，不幸的是试图定义高度或最大-我的桌子的高度或将其包装在高度定义的容器中没有任何作用......

编辑：我觉得我需要指定我希望单元格缩小，游戏板表保持其尺寸，这里是浏览器页面高度和宽度的 30%。

今天下午我尝试了很多选择，但没有一个有效。因为我对 css 很陌生，所以我很确定我错过了一些东西，但我看不到什么......

Answer 1

您最好使用 div 和 css 网格，而不是使用表格（从语义上讲，表格仅用于表格数据）。使用媒体查询，您可以更轻松地相应调整框的数量。.board {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(4, 50px);&nbsp; grid-template-rows: repeat(4,50px);&nbsp; grid-gap: 10px;}.box {&nbsp; background-color: dodgerblue;&nbsp; color: white;}<div class="board">&nbsp; <div class="box">1</div>&nbsp; <div class="box">2</div>&nbsp; <div class="box">3</div>&nbsp; <div class="box">4</div>&nbsp; <div class="box">5</div>&nbsp; <div class="box">6</div>&nbsp; <div class="box">7</div>&nbsp; <div class="box">8</div>&nbsp; <div class="box">9</div>&nbsp; <div class="box">10</div>&nbsp; <div class="box">11</div>&nbsp; <div class="box">12</div></div>