使用CSS将固定大小的框绘制到表格单元格的整个高度

Question

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

这是我到目前为止所做的：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

设置tr＆amp; td.boxes元素到display: flex以及子div高度为100%。

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

小提琴：https://jsfiddle.net/zx5Lvzym/

Answer 2

使用渐变。百分比表示每种颜色的颜色有多远。因此，50％意味着中途，51％意味着51起。

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

td.boxes {
  background: linear-gradient(to right, red 50%, green 51%);
  padding: 0
}

<table>
  <tr>
    <td>Mj</td>
    <td class="boxes">
      Example Text Here
    </td>
  </tr>
</table>