JSFiddle - React, Tailwind, and code Playground

by Marco Bernardini

HTML

<div>
    <section>
        <div id='container'>
            <table>
                <thead>
                    <tr>
                        <th>head 1
                            <div id='h1'>head 1</div>
                        </th>
                        <th>head 2
                            <div id='h2'>head 2</div>
                        </th>
                        <th>head last
                            <div id='hL'>head last</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Aardvark On The Run</td>
                        <td>beta
                            <br />longer text
                            <br />spanning on some lines</td>
                        <td>omega</td>
                    </tr>
                    <tr>
                        <td>alfa</td>
                        <td>beta
                            <br />long text</td>
                        <td>omega and something else to have a crowded cell</td>
                    </tr>
                    <tr>
                        <td>alfa</td>
                        <td>beta</td>
                        <td>omega</td>
                    </tr>
                    <tr>
                        <td>alfa</td>
                        <td>beta</td>
                        <td>omega</td>
                    </tr>
                    <tr>
                        <td>alfa</td>
                        <td>beta</td>
                        <td>omega just to finish</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 20px;
}
section {
    position: relative;
    border: 1px solid #000;
    padding-top: 2em;
    background: #cff;
}
#container {
    overflow-y: auto;
    height: 200px;
    padding-top: 1em;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
th {
    height: 12px;
    line-height: 0;
    padding: 0;
    margin: 0;
    color: transparent;
    background: #0f0;
    border: 2px solid #f0f;
    white-space: nowrap;
}
th div {
    position: absolute;
    background: #ff0;
    color: #00f;
    padding: 0.5em;
    top: 0;
    line-height: normal;
    border: 3px solid #805;
    opacity: 0.5;
    /* width: -moz-available; */
    /* width: 100%; */
    /* width: inherit; */
    /* left: 50px; */
    /* margin-left: auto; margin-right: auto; */
    /* margin-left: 2em; */
}
td {
    border-bottom:3px solid #666;
    background: #fdd;
    color: #c0c;
    padding: 1em;
}
td:first-child {
    border-right:1px solid #aaa;
    color: #008;
    font-family: serif;
    text-align: center;
}
td:last-child {
    border-left:1px solid #aaa;
}