JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<button id="button">Fiddle</button>

<div id="div">
    <table id="table">
        <colgroup class="letter"></colgroup>
        <colgroup class="letter"></colgroup>
        <thead>
            <tr><th>Uppercase</th><th>Lowercase</th></tr>
        </thead>
        <tbody>
            <tr><td>C</td><td>d</td></tr>
            <tr><td>D</td><td>a</td></tr>
            <tr><td>A</td><td>c</td></tr>
            <tr><td>B</td><td>b</td></tr>
        </tbody>
    </table>
</div>

CSS

body {
    position: relative;
}

#div {
    position: relative;
    height: 300px;
    margin-top: 20px;
}

table {
    display: block;
    position: absolute;
    height: auto;
    width: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

colgroup.letter {
    width: 100px;
}

thead {
    display: block;
    position: absolute;
    top: -20px;
    width: 100%;
    overflow:                hidden;
}

tbody {
    display: block;
    position: absolute;
    overflow:                auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: yellow;
}

tr {
    width: 100%;
}

td {
    line-height: 20px;
    padding: 2px 10px;
}

JavaScript

var table = new HtmlTable($("table"), {
        headers: ["Uppercase", "Lowercase"],
        sortable: true
    }),
    button = $("button");

table.element.setStyle("width", 300);
table.element.getElement("tbody").setStyle("width", 300);

button.onclick = function () {
    
    table.reSort();
    
};