JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<table>
    <thead>
        <tr>
            <th>I'm Header #1</th>
            <th>Header #2</th>
            <th>Header #3 is me!</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This is a cell</td>
            <td>My parent is Header #2</td>
            <td>35%</td>
        </tr>
        <tr>
            <td>Row #2</td>
            <td>My parent is Header #2 too! omg</td>
            <td>28%</td>
        </tr>
        <tr>
            <td>Yes</td>
            <td>Oh</td>
            <td>9000%</td>
        </tr>
    </tbody>
</table>

SCSS

body
{
    font-family: Arial, Tahoma, sans-serif;
}

table
{
    width: 100%;
    max-width: 100%;
    text-align: left;
    border-collapse: collapse;
}

// ----------------------------------------------//

@media (max-width: 600px)
{
    thead
    {
        display: none;
    }
    
    tbody tr
    {
        display: block;
        margin-bottom: 1em;
    }
    
    td
    {
        display: block;
        
        &:before
        {
            font-weight: bold;
            padding-right: 1em;
            display: inline-block;
            width: 8.5em;
        }
    }
    
    td:nth-of-type(1):before { content: "I'm Header #1"; }
    td:nth-of-type(2):before { content: "Header #2"; }
    td:nth-of-type(3):before { content: "Header #3 is me!"; }
}