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">
                                        </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%;}
.csstdhighlight{border: 0.25pt solid blue;}
.csstdred{color: White; background-color: red;}
.csstdgreen{color: White;background-color: green;}
#tableMain tr:first-child > td:first-child {position:fixed;}
#tableAppointment tr:first-child > td:first-child {position:relative;}
#divScroll { overflow:auto; height:611px;}