practice

　　　　

<html>
<meta charset="utf-8">

<style>
div{width:300px;
border:solid 1px black;
margin-top:40px;
border-radius:4px;
padding:4px;}
tbody{flex-diection:column;}
tr{display:flex;
flex-direction:column;
margin-bottom:10px;}
td{display:flex;
font-weight:bold;
align-items:center;
width:calc(100%*var(--size,1));
height:100%;
position:relative;}
td:hover .ナンバー{visibility:visible;
opacity:1;}
.メイン{--color-1:#aaffff;
--color-2:#ffddff;
--color-3:#aacfff;
--color-4:#ffddcc;
--color-5:#ccffcc;
--color-6:#ffbbbb;
width:100%;
height:100%;
margin:0 auto;}
tr:nth-of-type(10n+1) td{background:var(--color,var(--color-1));}
tr:nth-of-type(10n+2) td{background:var(--color,var(--color-2));}
tr:nth-of-type(10n+3) td{background:var(--color,var(--color-3));}
tr:nth-of-type(10n+4) td{background:var(--color,var(--color-4));}
tr:nth-of-type(10n+5) td{background:var(--color,var(--color-5));}
tr:nth-of-type(10n+6) td{background:var(--color,var(--color-6));}
.データ{transition-duration:1s;
opacity:0;}
tr:hover .データ{transition-duration:1s;
opacity:1;}
.ナンバー{position:absolute;
bottom:50%;
left:50%;
width:max-content;
padding:5px 10px;
border-radius:6px;
visibility:hidden;
opacity:0;
transition:opacity 1s;
background-color:#000000;
color:#ffffff;
text-align:center;}
</style>

<div>
<table class="メイン"style="height:100px;">
<tr>
<td style="--size:0.2"><span class="データ">1月</span><span class="ナンバー">データ:20</span></td>
</tr>
<tr>
<td style="--size:0.4"><span class="データ">2月</span><span class="ナンバー">データ:40</span></td>
</tr>
<tr>
<td style="--size:0.6"><span class="データ">3月</span><span class="ナンバー">データ:60</span></td>
</tr>
<tr>
<td style="--size:0.8"><span class="データ">4月</span><span class="ナンバー">データ:80</span></td>
</tr>
<tr>
<td style="--size:1"><span class="データ">5月</span><span class="ナンバー">データ:100</span></td>
</tr>
<tr>
<td style="--size:0.3"><span class="データ">6月</span><span class="ナンバー">データ:30</span></td>
</tr>
</table>
</div>

</html>