JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<table border="1">
    <thead>
        <tr>
            <th>Header One</th>
            <th>Header Two</th>
            <th>Header Three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-th="Header One">Some text 1</td>
            <td data-th="Header Two">Some text 2</td>
            <td data-th="Header Three">Some text 3</td>
        </tr>
        <tr>
            <td data-th="Header One">Some text 1</td>
            <td data-th="Header Two">Some text 2</td>
            <td data-th="Header Three">Some text 3</td>
        </tr>
        <tr>
            <td data-th="Header One">Some text 1</td>
            <td data-th="Header Two">Some text 2</td>
            <td data-th="Header Three">Some text 3</td>
        </tr>
        <tr>
            <td data-th="Header One">Some text 1</td>
            <td data-th="Header Two">Some text 2</td>
            <td data-th="Header Three">Some text 3</td>
        </tr>
        <tr>
            <td data-th="Header One">Some text 1</td>
            <td data-th="Header Two">Some text 2</td>
            <td data-th="Header Three">Some text 3</td>
        </tr>
        <tr>
            <td data-th="Header One">Some text 1</td>
            <td data-th="Header Two">Some text 2</td>
            <td data-th="Header Three">Some text 3</td>
        </tr>
    </tbody>
</table>

SCSS

.r {
    display: block;
    thead, tbody, tr, td, th {
        display: block;
    }
    
    thead tr {
        display: none;
    }
    
    tr {
        border: 1px solid gray;
    }
    
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    
    td:before {
        position: absolute;
        width: 50%;
        white-space: nowrap;
        content: attr(data-th);
        top: 0;
        left: 0;
    }
}

JavaScript

$(window).on('click', function() {
    $('table').toggleClass('r');
});