JSFiddle - React, Tailwind, and code Playground

HTML

<div id="TL" class="timeline" title="Timeline: click on the links to visit the history pages">

<table border="1">

<tbody><tr id="period">
 <td colspan="7"></td>
 <td colspan="25"><a id="tlWWII" href="http://www.satans-kittens.net/wwii.php#tlWWII">World War II</a></td>
 <td colspan="64"><a id="tl45250" href="http://www.satans-kittens.net/45to50.php#tl45250">1945 to 1950</a></td>
 <td colspan="24"><a id="tlKorea" href="http://www.satans-kittens.net/korea.php#tlKorea">Korea</a></td>
 <td colspan="132"><a id="tl53263" href="http://www.satans-kittens.net/53to63.php#tl53263">1953 to 1963</a></td>
 <td colspan="120"><a id="tlVietnam" href="http://www.satans-kittens.net/vietnam.php#tlVietnam">Vietnam</a></td>
 <td colspan="50"><a id="tlDisestab" href="http://www.satans-kittens.net/disestab.php#tlDisestab">The Last Crusade &amp; Phinal Phantoms</a></td>
 <td colspan="10"></td>
</tr>

<tr id="aircraft">
 <td colspan="7"></td>
 <td colspan="11">Grumman F-6F-3 Hellcat</td>
 <td colspan="11">Grumman F-6F-5 Hellcat</td>
 <td colspan="65">Grumman F8F Bearcat</td>
 <td colspan="34">Grumman F-9F-2B</td>
 <td colspan="42">Grumman F-9F-6</td>
 <td colspan="19">North American FJ-3 Fury</td>
 <td colspan="63">Grumman F11F Tiger</td>
 <td colspan="63">Vought F-8E</td>
 <td colspan="94">Vought F-8J</td>
 <td colspan="4">McDonnell F-4S Phantom</td>
 <td colspan="9">McDonnell F-4N Phantom</td>
</tr>

<tr id="location">
 <td colspan="7" style="text-align:right;"><a href="../wwii.php#Establishment">Squadron established<br>15 AUG 1943</a></td>
 <td>San Diego</td>
 <td colspan="8">Los Alatimos</td>
 <td>Kahului</td>
 <td>Eniwetok</td>
 <td colspan="5"><a href="../wwii.php#IntoAction">USS Lexington (CV&nbsp;16)</a></td>
 <td colspan="3">Alameda</td>
 <td colspan="6">Santa Rosa</td>
 <td>Kahului</td>
 <td colspan="3"></td>
 <td colspan="3">Barber's Point</td>
 <td>enrt. Guam</td>
 <td colspan="4"><a href="../45to50.php#China">USS Antietam (CV&nbsp;36)</a></td>
 <td colspan="12">Alameda</td>
...

JavaScript

/* jQuery required */
function adjustScrollBar(id,parentid){
        var pos = $("#"+id).position();
        while(pos.left >10){
            pos = $("#"+id).position();
            $("#"+parentid).scrollLeft($("#"+parentid).scrollLeft()+1);
        }
}

/* with javascript no jQuery required */
function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.parentNode;
    }
    return { top: _y, left: _x };
}

function adjustScrollBar2(id,parentid){
        while(getOffset( document.getElementById(id) ).left > 22 ){
         document.getElementById(parentid).scrollLeft += 1;
        }
}


adjustScrollBar2('tlKorea','TL'); 
// adjustScrollBar('tlKorea','TL');