JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

CSS

div {
    width: 300px;
    height: 300px;
    border: 1px solid blue;
    overflow: auto;
}
ul{ border: solid 1px red;overflow:auto;width:100%}
table{width: 100%;}

JavaScript

$(function(){
    var container = $('div');
    var ul = "<ul><li>Name</li><li>Age</li><li>Sex</liv></ul>";
    $('#my_table tr td').each(function(){
       $(this).append(ul);
    })
    $('#my_table tr').click(function(){
        scrollTop = $(this).offset().top;
        cot = container.offset().top;
        cst = container.scrollTop();
        console.log(scrollTop,cot,cst)
        container.animate({
            scrollTop:scrollTop+cst
        })    
    })

})