JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<table id="wpop" class="w4 divOutline note1 strong cell0 cellp0 inlineBlock more wgt" style="left: 2px;"><tbody><tr><td></td><td>&nbsp; </td><td class="strong"> Trade Log filtered for 7/16/2020 only:</td><td><c-s ctrl="1" title="Trade Log filtered for 7/16/2020 only." hr="ViewTrades.aspx?fromdate=7%2f16%2f2020&amp;todate=7%2f16%2f2020">7/16/2020</c-s></td><td class="strong"> Trade Log filtered for the ID only:</td><td><c-s ctrl="1" title="Trade Log filtered for the ID only." hr="ViewTrades.aspx?ID=2020-08-0357444154" class="rHover">2020-08-0357444154</c-s></td><td class="strong"> Trade Log filtered for 7/1/2020 only:</td><td><c-s ctrl="1" title="Trade Log filtered for 7/1/2020 only." hr="ViewTrades.aspx?fromdate=7%2f1%2f2020&amp;todate=7%2f1%2f2020" class="rHover">7/1/2020</c-s></td><td class="strong"> Trade Log filtered for the ID only:</td><td><c-s ctrl="1" title="Trade Log filtered for the ID only." hr="ViewTrades.aspx?ID=2020-07-2862282119" class="rHover">2020-07-2862282119</c-s></td><td class="strong"> Trade Log filtered for 7/9/2020 only:</td><td><c-s ctrl="1" title="Trade Log filtered for 7/9/2020 only." hr="ViewTrades.aspx?fromdate=7%2f9%2f2020&amp;todate=7%2f9%2f2020" class="rHover">7/9/2020</c-s></td><td class="strong"> Trade Log filtered for the ID only:</td><td><c-s ctrl="1" title="Trade Log filtered for the ID only." hr="ViewTrades.aspx?ID=2020-07-2850627657" class="rHover">2020-07-2850627657</c-s></td><td class="strong"> Trade Log filtered for 7/15/2020 only:</td><td><c-s ctrl="1" title="Trade Log filtered for 7/15/2020 only." hr="ViewTrades.aspx?fromdate=7%2f15%2f2020&amp;todate=7%2f15%2f2020">7/15/2020</c-s></td><td class="strong"> Trade Log filtered for the ID only:</td><td><c-s ctrl="1" title="Trade Log filtered for the ID only." hr="ViewTrades.aspx?ID=2020-07-2854571455">2020-07-2854571455</c-s></td><td><c-s ctrl="1" title="Trade Log filtered for the ID only." hr="ViewTrades.aspx?ID=2020-08-0355014524">2020-08-0355014524</c-s></td><td...

CSS

.container {
        position: relative;
        display: flex;
        align-items: center;
    }
    .scroll-wrapper {
        overflow: hidden;
        white-space: nowrap;
        flex-grow: 1;
    }
    .scroll-btn {
        background: #ddd;
        border: 1px solid #ccc;
        cursor: pointer;
        height: 100%;
    }

JavaScript

function makeTableScrollable(tableSelector, width) {
    var $table = $(tableSelector);

    if ($table.width() < parseInt(width))
        return;
        
    // Wrap the table in necessary HTML
    $table.wrap('<div class="scroll-wrapper"></div>')
          .closest('.scroll-wrapper').wrap('<div class="container"></div>');

    var $container = $table.closest('.container');

    // Add scroll buttons
    $container.prepend('<button class="scroll-btn" id="scrollLeft">&lt;</button>');
    $container.append('<button class="scroll-btn" id="scrollRight">&gt;</button>');

    // Set the width and height of the scroll-wrapper
    var $wrapper = $table.closest('.scroll-wrapper');
    $wrapper.width(width);
    $wrapper.height($table.outerHeight());

    // Implement scrolling
    $container.find('#scrollLeft').click(function() {
        $wrapper.animate({
            scrollLeft: '-=100'
        }, 200);
    });

    $container.find('#scrollRight').click(function() {
        $wrapper.animate({
            scrollLeft: '+=100'
        }, 200);
    });
}

// Call the function with the table selector and desired width
$(document).ready(function() {
    makeTableScrollable('#wpop', '200px');
});