JSFiddle - React, Tailwind, and code Playground

by krauss

HTML

<h1>CSS scroll Overflow-Y applyed to TABLE</h1> 
(works fine with any html-doctype, see css display)

<table id="myTable" border="1" width="360"> 
<thead> 
<tr> 
    <th width="15%">Last Name</th> 
    <th width="15%">First Name</th> 
    <th>Email</th> 
    <th width="19%">Due</th> 
</tr> 
</thead> 

<tbody> 
<tr> 
    <td width="15%">Smith</td> 
    <td width="15%">John</td> 
    <td>[email protected]</td> 
    <td width="15%">$50.00</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
</tr> 
<tr> 
    <td>Silva</td> 
    <td>Mary</td> 
    <td>[email protected]</td> 
    <td>$55.00</td> 
</tr> 
</tbody> 
</table>

CSS

#myTable thead, #myTable tbody { display:  block;}/* need to be cross-bowser ! */
#myTable tbody {height: 4em; overflow-y: scroll}