CSSを使って表のセルの高さに固定サイズのボックスを描く

Question

CSSを使用して、あるサイズの2つのボックス（赤と緑）を表のセルに描画したいと考えています。テーブルセルの高さをいっぱいに満たすことができません。

これは私がこれまで持っているものです。

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.boxesdisplay: flexの要素と子100%からdivの高さ。

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>