JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin:0px; padding:0px; float:left"><table>
        <tr><td class="headcol"><p>1</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>2</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>3</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>4</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>5</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>6</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>7</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>8</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol"><p>9</p></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>

CSS

<style>
        body { font:16px Calibri; behavior: expression($.pseudo(this,true));}
        table { border-collapse:separate; border-top: 3px solid grey; }
        td {
            margin:0;
            border:3px solid grey;
            border-top-width:0px;
            white-space:nowrap;
        }
        div {
            width: 600px;
            overflow-x:scroll;  
            margin-left:5em;
            overflow-y:visible;
            padding-bottom:1px;
            
        }
        .headcol {
            
            
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
            padding-right:30px;
        }
        
        
        /*.headcol p: before {content:'row';}*/
        .long { background:yellow; letter-spacing:1em;  }
        
        p:before, p {
        before: 'Row';
        content: 'Row'; }
    
       p:before, p .before {
       color: black; }
    
     p{
         margin:0px;
         padding:0px;
         text-align:left;
     }
     p.before
     {
         color:green;
     }
    </style>

JavaScript

<script type="text/javascript">
(function($){

    var patterns = {
        text: /^['"]?(.+?)["']?$/,
        url: /^url\(["']?(.+?)['"]?\)$/
    };

    function clean(content) {
        if(content && content.length) {
            var text = content.match(patterns.text)[1],
                url = text.match(patterns.url);
            return url ? '<img src="' + url[1] + '" />': text;
        }
    }

    function inject(prop, elem, content) {
        if(prop != 'after') prop = 'before';
        if(content = clean(elem.currentStyle[prop])) {
            $(elem)[prop == 'before' ? 'prepend' : 'append'](
                $(document.createElement('span')).addClass(prop).html(content)
            );
        }
    }

    $.pseudo = function(elem) {
        inject('before', elem);
        inject('after', elem);
        elem.runtimeStyle.behavior = null;
    };
    
    if(document.createStyleSheet) {
        var o = document.createStyleSheet(null, 0);
        o.addRule('.dummy','display: static;');
        o.cssText = 'html, head, head *, body, *.before, *.after, *.before *, *.after * { behavior: none; } * { behavior: expression($.pseudo(this)); }';
    }

})(jQuery);
</script>