JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<h2>Vertical scrolling tables</h2>
<p class="bold info">Method #2</p>
    <table class="tableone" summary="This table lists flights arriving at Bristol International Airport.">
      <caption>ARRIVALS TO BRISTOL - ENGLAND</caption>
      <thead>
        <tr>
          <th class="th1" scope="col">FLIGHT CODE</th> 
          <th class="th2" scope="col">FROM</th> 
          <th class="th3" scope="col">STA</th> 
          <th class="th4" scope="col">ETA</th> 
          <th class="th5" scope="col">Notes</th> 
        </tr>
      </thead>

      <tfoot>
        <tr>
          <td colspan="5">DATE : 19th OCTOBER 2005</td>
        </tr>
      </tfoot>
<tbody>
<tr><td colspan="5">
<div class="innerb">
      <table class="tabletwo">
      <tr>
        <th class="td1" scope="row">T3 4264</th>
        <td class="td2">ISLE OF MAN</td>
        <td class="td3">11:40</td>
        <td class="td4">11:42</td>
        <td class="td5">LANDED AT 11:43</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4081</th>
        <td>PARIS-CDG</td>
        <td>11:45</td>
        <td>11:57</td>
        <td>LANDED AT 11:58</td>
      </tr>
      <tr>
        <th scope="row">BE 843</th>
        <td>BELFAST CITY</td>
        <td>11:45</td>
        <td>11:40</td>
        <td>LANDED AT 11:41</td>
      </tr>
      <tr class="dk">
        <th scope="row">GR 642</th>
        <td>GUERNSEY</td>
        <td>11:55</td>
        <td>11:38</td>
        <td>LANDED AT 11:37</td>
      </tr>
      <tr>
        <th scope="row">EZY 6192</th>
        <td>PISA</td>
        <td>12:05</td>
        <td>12:18</td>
        <td>LANDED AT 12:17</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6052</th>
        <td>MALAGA</td>
        <td>12:15</td>
        <td>11:55</td>
        <td>LANDED AT 11:55</td>
      </tr>
      <tr>
        <th scope="row">EZY 6074</th>
        <td>ALICANTE</td>
        <td>12:35</td>
        <td>12:12</td>
        <td>LANDED AT 12:14</td>
      </tr>
      <tr...

CSS

#info {padding-bottom:100px;}
<!--

.outer {
position:relative;
padding:4em 0 3em 0;
width:54em;
background:#eee;
margin:0 auto 3em auto;
}
.innera {
overflow:auto;
width:54em;
height:9.6em;
background:#eee;
}
.outer table caption {
position:absolute;
width:51.7em;
text-align:center;
top:0;
left:0;
height:1.5em;
background:#697210;
border:0.1em solid #fff;
color:#fff;
}
.outer thead tr {
position:absolute;
top:1.5em;
height:1.5em;
left:0;
}
.outer tfoot td {
position:absolute;
width:51.5em;
text-align:center;
background:#f0c992; 
border:0.1em solid #000;
color:#000;
bottom:0;
left:0
}
.outer th, .outer td {
width:10em; 
text-align:left;
}
.outer th {
background:#724a10; 
color:#fff;}
.outer .dk {background:#fff;
}

-->

.tableone {width:100%; border-collapse:collapse; margin:0 auto;}
.tabletwo {width:100%; border-collapse:collapse;}
.th1 {width:149px;}
.th2 {width:99px;}
.th3 {width:99px;}
.th4 {width:99px;}
.th5 {width:170px;}

.td1 {width:149px;}
.td2 {width:99px;}
.td3 {width:99px;}
.td4 {width:99px;}
.td5 {width:170px;}

.tableone {background:#697210; border:1px solid #fff; color:#fff;}
.tableone td {border:1px solid #fff; color:#fff;}
.tableone tbody {background:#f0c992; color:#000;}
.tableone caption {background:#fff; color:#697210; font-size:1.2em; margin:0 auto;}
.tabletwo td {background:#eee; color:#000;}
.tableone th, .tabletwo th {text-align:left;}
.tabletwo tr.dk td {background:#FFF; color:#000;}

.innerb {height:10em; overflow:auto;}