如何在CSS中指定表格行的高度，并从顶部开始将每一行放在另一行之下？

Question

.block {
  width: 445px;
  height: 544px;
  border-bottom: 1px solid rgba(24, 24, 28, 0.45);
}

.table {
  width: 100%;
  height: 100%;
  border-spacing: 3px;
  border-collapse: separate;
}

.row {
  height: calc(100% / 7);
  width: 100%;
}

.cell {
  width: calc(100% / 7);
  height: auto;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

<div class="block">
  <table class="table">
    <tr class="row">
      <td class="cell">A</td>
      <td class="cell">B</td>
      <td class="cell">C</td>
      <td class="cell">D</td>
      <td class="cell">E</td>
      <td class="cell">F</td>
      <td class="cell">G</td>
    </tr>
    <tr class="row">
      <td class="cell">1</td>
      <td class="cell">2</td>
      <td class="cell">3</td>
      <td class="cell">4</td>
      <td class="cell">5</td>
      <td class="cell">6</td>
      <td class="cell">7</td>
    </tr>
  </table>
</div>

我有行元素高度的问题 - 我希望它是表格的高度（100％）除以7（我有计算（100％/ 7）），但它不起作用。正如您在屏幕上看到的那样 - 它是267px，应该更少。我希望这些行以正常高度从表的顶部开始（因此应该有两行，一行在另一行之下，下面有很多空白，因为该表具有100％的块元素高度）。我正在动态创建行，它们将填充所有表（因此我将有7行具有相同的高度，并将填充所有表）。我犯了哪个错误？谢谢你的帮助！

两行所需的输出：

七行所需的输出：

Answer 1

您只需要在行上定义display属性即可使height生效。

请参阅此示例：https://jsfiddle.net/dieguezz/q2j6me6h/

.row {
  height: calc(100% / 7);
  width: 100%;
  display: flex;
  align-items: center;
}