JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<input type='button' value='Arriba' class='up' />
<input type='button' value='Abajo' class='down' />
HTML  CSS   Result
Edit on 
<table class="zebra"> 
<col>
<col>
<col>
<col>
<thead> 
    
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody style='overflow:auto;heigh:30px;'> 
    <tr id='1' class='dummyRow'> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr id='2'>
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr id='3'>
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr id='4'>
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
    <tr id='5'> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr id='7'>
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr id='8'> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr id='9'> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
<tr id='10'>
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr id='11'>
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr id='12'>
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
   ...

CSS

HTML  CSS   Result
Edit on 
body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 200px;
 height: 100px;
 overflow: auto;
}

tbody {
 width: 200px;
 height: 100px;
 overflow: auto;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
tbody tr:hover {
  background: yellow;
}


tfoot{
    background: aliceblue;
    color: black;
    font-size: 12pt;
}

JavaScript

$(document).ready(function (){
    $('.up').click( function (){
        //alert("click");
        $('.zebra').slideUp(3000);
    });
    $('tbody > tr').click( function (){
        var id = $(this).attr('id');
         //$('.dummyRow').slideUp('normal', function(){$('.dummyRow').hide();});
        //alert("id fila "+id);
        //$('#'+id).slideRow('up', 500); //slide speed
        //$('#'+id).slideRow('down', 500, function() { alert('Row available'); });
        //$('#'+id).slideRow('down', 500, 'linear', function() { alert('Row available'); }); 
        //$('#'+id).slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} });
    });    
    
   
});