Table cell 100% height

by Arthur Lutkevichus

HTML

<div id="measure">
</div>
<table>
  <tbody class="hidden">
    <tr>
    </tr>
  </tbody>
  <tbody class="small">
    <tr>
      <td>small</td>
      <td>sec<br />ond</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody class="small">
    <tr>
      <td>small</td>
      <td>sec<br />ond</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody class="small">
    <tr>
      <td>small</td>
      <td>sec<br />ond</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody class="small">
    <tr>
      <td>smll</td>
      <td>II</td>
      <td>III</td>
    </tr>
  </tbody>
  <tbody class="large">
    <tr>
      <td>large</td>
    </tr>
  </tbody>
</table>

SCSS

#measure {
  position: absolute;
  background: cyan;
  width: 25vw;
  pointer-events: none;
  z-index: -1;
}

#measure,
table {
    height: 200px;
}

table {
    width: 100px;
    border: 0;
    background: red;
    opacity: .9;
}

.hidden tr {
  display: none;
}

.small,
.small tr,
.small td {
  height: 0;
  background: tomato;
}

.large,
.large tr,
.large td {
  display: flex;
  height: 100%;
  margin: auto 0;
}