JSFiddle - React, Tailwind, and code Playground

by msdevs

HTML

<div>
    <table id="tabl" tabindex="1">
        <thead>
            <tr>
                <th style="font-weight: bold">merd</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>second</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
            <tr>
                <td>dsadfawdfadfa</td>
            </tr>
   ...

CSS

table {
    table-layout: fixed;
    font-family: arial;
    font-size: 11px;
    text-align: left;
    outline: none;
    width: 625px;
}
div {
    overflow-y: auto;
    overflow-x: hidden;
    height: 150px;
    width: 300px
}

JavaScript

$('table').focusin(function (e) {
    console.log("table got focus - scroller jumps up");
}).click(function () {
    $('table').focus();
});