JSFiddle - React, Tailwind, and code Playground

by krauss

HTML

<h1>Overflow-Y applyed to TABLE with jQuery</h1> 

<h2>Splitted table by jQuery run</h2>
Work as cross-browser (and at strict doctype). 

<div id="myTable2">
<table border="1" width="360"> 
<thead> 
<tr> 
    <th width="15%">Last Name</th> 
    <th width="15%">First Name</th> 
    <th>Email</th> 
    <th width="15%">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> 
</div>

<!-- ########## -->
<hr/>
<h2>Non-splitted not runs</h2>
Does NOT work
<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="15%">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

#myTable2 {height: 4em; overflow-y: scroll}  /* works fine */
#myTable tbody {height: 4em; overflow-y: scroll} /* does NOT work */

h1 {font-size:180%}
h2 {font-size:140%}

JavaScript

var h = $('#myTable2').clone();
h.find('tbody').html('');
$('#myTable2 thead').html('');
$('#myTable2').before(h.html());