JSFiddle - React, Tailwind, and code Playground

by Arkkimaagi

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table th{background:pink;}
        table table td,
        table table th{border:1px solid silver;}
        .scroll td td,
        .scroll td th{visibility:hidden;}
        .scroll td td.visible,
        .scroll td th.visible{visibility:visible;}
        .slicer{overflow:hidden;}
        .s1,.s3,.s2{position:absolute;}
        .s2{z-index:100;}
        .s3{z-index:10;}
        .s1{z-index:1000;}
    </style>
</head>
<body>

<table>
    <tr>
        <td>
<table cellpadding="0" cellspacing="0">
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
        </tr>
        <tr>
            <th>a</th>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
        </tr>
        <tr>
            <th>a</th>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
        </tr>
        <tr>
            <th>a</th>
            <td>b</td>
            <td>c</td>
            <td>david_Mark_Twain<br>Echo<br>Lupus</td>
            <td>e</td>
        </tr>
        <tr>
            <th>a</th>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
        </tr>
    </table>
        </td>
    </tr>
</table>
    

<br>

    <table class="scroll" cellpadding="0" cellspacing="0" style="width:209px;height:150px;border:1px solid blue;">
        <tr>
            <td class="s1" style="width:48px;height:24px;">
                <div class="slicer" style="width:48px;height:24px;">
                    <table cellpadding="0" cellspacing="0" class="test">
                        <tr>
                            <th class="visible">Lorem</th>
                        </tr>
                        <tr>
                            <th>a</th>
                        </tr>
                       ...