css - 使用 CSS 将固定大小的框绘制到表格单元格的全高

Question

我想使用 CSS 将两个一定大小的框(红色和绿色)绘制到一个表格单元格中。我无法让它们填满表格单元格的整个高度。

这是我目前所拥有的:

td {
  background-color: lightblue;
  padding: 5px;
}

td.boxes {
  padding: 0
}

div.a {
  display: inline-block;
  width: 3px;
  background-color: red;
}

div.b {
  display: inline-block;
  width: 3px;
  background-color: green;
}

<table>
  <tr>
    <td>Mj</td>
    <td class="boxes">
      <div class="a">&nbsp;</div><!--
      --><div class="b">&nbsp;</div>
    </td>
  </tr>
</table>

Answer 1

将 tr 和 td.boxes 元素设置为 display: flex 并将子 div 高度设置为 100%。

td.boxes,
tr {
  padding: 0;
  display: flex
}

fiddle :https://jsfiddle.net/zx5Lvzym/