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

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 {

  display: grid;

  grid-template-columns: repeat(4, 50px);

  grid-template-rows: repeat(4,50px);

  grid-gap: 10px;

}

.box {

  background-color: dodgerblue;

  color: white;

}

<div class="board">

  <div class="box">1</div>

  <div class="box">2</div>

  <div class="box">3</div>

  <div class="box">4</div>

  <div class="box">5</div>

  <div class="box">6</div>

  <div class="box">7</div>

  <div class="box">8</div>

  <div class="box">9</div>

  <div class="box">10</div>

  <div class="box">11</div>

  <div class="box">12</div>

</div>