Make Comparison Table with CSS Flexbox

Ketika kesibukan bertambah dan virus malas lagi menerpa ternyata baru terasa ngeblog itu membutuhkan watku & tenaga ekstra :D Belum lagi saat kita ingin mau melakukan posting, ternyata tidak ada ide/bahan untuk melakukan itu semua! Mentok-mentok berkeliaran di dunia maya dan baca-baca apa yang lagi trending :P Mungkin salah satu faktor ide menjadi mandek yaitu kita tanpa sadar disibukan oleh kesibukan yg tidak tentu (baca update-an medsos) =))

Berikut adalah salah satu contoh penulisan markup tabel HTML sederhana, berisi dua kolom dan dua baris:

 <table>
  <tr>
    <th>Bulan</th>
    <th>Simpan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>$300</td>
  </tr>
</table> 

Sekarang AA Koben ingin berbagi sedikit trik dan info bagaimana membuat penulisan mark-up tabel menggunakan teknik CSS flexbox. Hasil akhir seperti berikut:

<div class="comptbl">
<ul class="brs">
<li class="legend">Head Title I</li>
<li class="heat">Head Title II</li>
<li class="heat">Head Title III</li>
<li class="heat">Head Title IV</li>
<li class="heat">Head Title V</li>
</ul>
<ul class="brs">
<li class="legend">Head Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
</ul>
<ul class="brs">
<li class="legend">Head Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
</ul>
<ul class="brs">
<li class="legend">Head Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
</ul>
<ul class="brs">
<li class="legend">Head Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
</ul>
<ul class="brs">
<li class="legend"></li>
<li><a href="" class="calltoact">Title Button I</a></li>
<li><a href="" class="calltoact">Title Button II</a></li>
<li><a href="" class="calltoact">Title Button III</a></li>
<li><a href="" class="calltoact">Title Button IV</a></li>
</ul>
</div>

Kode CSS Comparison Table.
Source & demo Creating a clean CSS Comparison Table with CSS flexbox.
BONUS:

CSS only Perspective Menus - Pure CSS accordion - Pure CSS 3D cards - Animated button with rainbow hover - CSS Lightbox - Animated Speech Bubble Nav - Playful CSS figure & figcaption - Figure & Figcaption - Multiple transitions on a button - Accessible SVG Link List with Tooltips - Responsive 3D Flip Menu - Scrolling Gradient - Images Slider using CSS - Expanding and Collapsing Hamburger Menu - CSS Droplet Menu Animation