JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<div>
    <table id="my_table">
        <tr id='row_1'>
            <td>1</td>
            <td id="col_A">A</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_2'>
            <td>2</td>
            <td id="col_B">B</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_3'>
            <td>3</td>
            <td id="col_C" class="green">GREEN</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_4'>
            <td>4</td>
            <td id="col_D">D</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_5'>
            <td>5</td>
            <td id="col_E">E</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_6'>
            <td>6</td>
            <td id="col_F">F</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_7'>
            <td>7</td>
            <td id="col_G">G</td>
            <td>Blah</td>
            <td class="green">Green2</td>
            <td>Blah</td>
        </tr>
        <tr id='row_8'>
            <td>8</td>
            <td id="col_H">H</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
        <tr id='row_9'>
            <td>9</td>
            <td id="col_I">I</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </table>
</div>

CSS

table {
    width: 200px;
    font-family: Calibri;
}
td {
    width: 100px;
    border: 1px solid white;
    background-color: gray;
    color: white;
    padding: 3px;
}
.green {
    background-color: green;
}
div {
    width: 150px;
    height: 70px;
    overflow: auto;
}

JavaScript

var container = $('div');
var scrollTo = $('.green').first();




container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop(),
    scrollLeft: scrollTo.offset().left- container.offset().left  + container.scrollLeft()
});

/*
container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
);
*/