JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<table class="table_header">
  <tr>
    <td width='200px'>Name</td>
    <td width='200px'>Leader</td>
    <td class="vertical-text" width='60px'> 00:00</td>
    <td class="vertical-text" width='60px'> 01:00</td>
    <td class="vertical-text" width='60px'> 02:00</td>
    <td class="vertical-text" width='60px'> 03:00</td>
    <td class="vertical-text" width='60px'> 04:00</td>
    <td class="vertical-text" width='60px'> 05:00</td>
    <td class="vertical-text" width='60px'> 06:00</td>
    <td class="vertical-text" width='60px'> 07:00</td>
    <td class="vertical-text" width='60px'> 08:00</td>
    <td class="vertical-text" width='60px'> 09:00</td>
    <td class="vertical-text" width='60px'> 10:00</td>
    <td class="vertical-text" width='60px'> 11:00</td>
    <td class="vertical-text" width='60px'> 12:00</td>
    <td class="vertical-text" width='60px'> 13:00</td>
    <td class="vertical-text" width='60px'> 14:00</td>
    <td class="vertical-text" width='60px'> 15:00</td>
    <td class="vertical-text" width='60px'> 16:00</td>
    <td class="vertical-text" width='60px'> 17:00</td>
    <td class="vertical-text" width='60px'> 18:00</td>
    <td class="vertical-text" width='60px'> 19:00</td>
    <td class="vertical-text" width='60px'> 20:00</td>
    <td class="vertical-text" width='60px'> 21:00</td>
    <td class="vertical-text" width='60px'> 22:00</td>
    <td class="vertical-text" width='60px'> 23:00</td>
  </tr>
</table>
<div class="table_body">
<table>
  <tr>
    <td width='200px'>Nicky Alderete</td>
    <td width='200px'>Ali Holl</td>
    <td width='1110px' style='background-color:#FFFFFF'></td>
    <td width='105px' style='background-color:#A9D08E'></td>
    <td width='10px' style='background-color:#4472C4'></td>
    <td width='125px' style='background-color:#A9D08E'></td>
    <td width='30px' style='background-color:#F4B084'></td>
    <td width='60px' style='background-color:#A9D08E'></td>
  </tr>
</table>
<table>
  <tr>
    <td width='200px'>Hobert Bacher</td>
   ...

CSS

table {
    table-layout: fixed;
    width: 1840px;
    font-size: small;
    cellspacing='0';
    cellpadding='0';
  }
  
  .vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    line-height: 30px;
  }

.table_header {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 8px;
}
.table_body {
  margin-top: 40px;
}