JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

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

<div>
<table id="table">
    <colgroup class="letter"></colgroup>
    <thead>
        <tr><th>Letter</th></tr>
    </thead>
    <tbody>
        <tr><td>A</td></tr>
        <tr><td>B</td></tr>
        <tr><td>C</td></tr>
        <tr><td>D</td></tr>
    </tbody>
</table>
</div>

CSS

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: 50px;
}

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 = document.getElementById("table"),
    button = document.getElementById("button");

button.onclick = function () {
    var tbody = table.getElementsByTagName("tbody")[0],
        rows = tbody.getElementsByTagName("tr"),
        i = j = rows.length, elements = [];
    
    tbody.style.width = table.offsetWidth + "px";
    
    //tbody = table.removeChild(tbody);
/*    
*/
    while (i--) elements.push(rows[i]);
    
    i = 0;
    
    while (i < j) tbody.appendChild(elements[i++]);
    
    //table.appendChild(tbody);
    
};