JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div id="tableContainer" class="tableContainer">
    <table class="sortable" border=1 frame=void cellspacing=0 cellpadding=4>
        <thead class="fixedHeader">
            <tr>
                <th id="Column1" align=center valign=bottom>Column bla bla 1</th>
                <th id="Column2" align=center valign=bottom>Column 2</th>
                <th id="Column " align=center valign=bottom>Column 3</th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td align=right>ABCD</td>
                <td aligh=right>XY</td>
                <td aligh=right>12345678</td>
            </tr>
            <tr>
                <td align=right>BAR</td>
                <td aligh=right>BAZ</td>
                <td aligh=right>12345678</td>
            </tr>
            <tr>
                <td align=right>BAR</td>
                <td aligh=right>BAZ</td>
                <td aligh=right>12345678</td>
            </tr>
            <tr>
                <td align=right>CD</td>
                <td aligh=right>FOO</td>
                <td aligh=right>12345678</td>
            </tr>
            <tr>
                <td align=right>BAR</td>
                <td aligh=right>BAZ</td>
                <td aligh=right>12345678</td>
            </tr>
        </tbody>
    </table>

CSS

* {
    box-sizing: border-box;
}
th, td {
    min-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
}
th:last-of-type{
    min-width: 125px;
    
}
td:last-of-type {
    min-width: 125px;
    
}
html>body tbody.scrollContent {
    display: block;
    height: 100px;
    overflow: hidden;
    overflow-y: auto;
    
}
thead.fixedHeader tr {
    position: relative
}
html>body thead.fixedHeader tr {
    display: block
}
div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 150px;
    overflow: auto;
    
}
html>body div.tableContainer {
    overflow: hidden;
}
div.tableContainer table {
    
}