JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<!-- Add borderSpec to the table's class, so it has the 
    expected border when you start -->

        <table id="tbWorking" class="tbTest borderSpec">
            <tr class="trTest">
                <th class="tdTest">Col1</th>
                <th class="tdTest">Col2</th>
            </tr>  
            <tr class="trTest">
                <td class="tdTest">a</td>
                <td class="tdTest">b</td>
            </tr>
            <tr class="trTest">
                <td class="tdTest">c</td>
                <td class="tdTest">d</td>
            </tr>
            <tr class="trTest">
                <td class="tdTest">e</td>
            </tr>        
        </table>

CSS

/* Split the CSS into something specific to the table
       and something used for specifying the border */
    .tbTest
    {
        empty-cells: show;    
        border-collapse:separate; /* Table and Cell borders are unique */
        background-color:#DDDDDD; /* Colour of gaps between cells */
        color:Black; /* Text colour */
    }

    .borderSpec
    {
        border:1px solid Navy;
    }

    .trTest
    {
        background-color:#DAD7FA;
    }

    .tdTest
    {
        padding:150px;

        border-color:#7D72FC;
        border-width:1px;
        border-style:solid;    
    }

JavaScript

///////////////////////////////////////////////////////////////////////////////
    //
    // Graphics Functions

    // Sometimes you have to account for scrollbar widths etc.  
    function getScrollBarWidth() {
        var inner = $('<p style="width:100%;height:200px"/>');
        var outer = $('<div style="position:absolute;top:0;left:0;visibility:hidden;width:200px;height:150px;overflow:hidden;"/>');

        $("body").append(outer.append(inner));
        
        var w1 = inner.outerWidth(true);
        outer.css("overflow","scroll");
        var w2 = inner.outerWidth(true);
        if (w1 == w2) w2 = outer.innerWidth();

        outer.remove();

        return (w1 - w2);
    };


    // Sometimes you have to account for scrollbar widths etc.  
    function getScrollBarHeight() {
        var inner = document.createElement('p');
        inner.style.height = "100%";
        inner.style.width = "200px";

        var outer = document.createElement('div');
        outer.style.position = "absolute";
        outer.style.top = "0px";
        outer.style.left = "0px";
        outer.style.visibility = "hidden";
        outer.style.width = "150px";
        outer.style.height = "200px";
        outer.style.overflow = "hidden";
        outer.appendChild(inner);

        document.body.appendChild(outer);
        var h1 = inner.offsetHeight;
        outer.style.overflow = 'scroll';
        var h2 = inner.offsetHeight;
        if (h1 == h2) h2 = outer.clientHeight;

        document.body.removeChild(outer);

        return (h1 - h2);
    };


    //
    
    var prepareTables = function() {
        // Function to prepare the tables are scrollable
        prepTable("tbWorking",2);
    }();

    function prepTable(sTable, rowsToShow) {

        // Pass in a table, and the number of data rows, not including the header, to display

        var tableSource = document.getElementById(sTable);
        if (tableSource == null) { return; }
        
        // clear off the...