JSFiddle - React, Tailwind, and code Playground

by john_rock

HTML

<table id="tableMain" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">
    <tr>
      <td width="20%" valign="top">
      <table width="100%">
        <tr>          
          <td>Button</td>
        </tr>
         <tr>          
          <td>Button</td>
        </tr>
         <tr>          
          <td>Button</td>
        </tr>
        
        </table>
      </td>
      <td width="80%">
       <div id="divScroll" style="overflow-x: hidden">
   <table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">
                                <thead>
                                    <tr>
                                        <td class="csstextheader" width="70px">&nbsp;</td>
                                        <td class="csstextheader" width="70px">
                                            <b>Time Slot&nbsp;</b>
                                        </td>
                                      <td><b>Room 7</b></td>
                                      <td><b>Room 8</b></td>
                                      <td><b>Room 9</b></td>
                                      <td><b>Room 10</b></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="csstablelisttd">
                                        <td width="70px">
                                            08:00AM
                                        </td>
                                        <td>
                                            00
                                        </td>
                                      <td class="csstdred">
                                            John
                                        </td>
                                      <td>&nbsp;</td>
                            <td>&nbsp;</td>                                      <td>&nbsp;</td>                                     
            ...

CSS

table {
width:100%;
}

.csstdred{
color: White; background-color: red;
}

.csstdgreen{
color: White;background-color: green;
}

#tableMain tr td table {
position :fixed;
}    

#tableAppointment thead {
position:fixed;
}

#tableAppointment {
position :relative !important;
}

#divScroll { 
overflow:auto; height:500px;
}

thead tr:first-child{ 
position:fixed;top:0px;
background-color:blue;
color:white;
width:100%;
overflow:hidden;
height:22px !important;
vertical-align: top;
}

thead tr:nth-child(2){
border-top:21px solid blue; 
}
thead tr td{
 height:22px;   
}
thead tr td:nth-child(1){
width:13%;
}
thead tr td:nth-child(2){
width:7%;
}
thead tr td:nth-child(3){
width:13%;
}
thead tr td:nth-child(4){
width:15%;
}
thead tr td:nth-child(5){
width:14%;
}