JSFiddle - React, Tailwind, and code Playground

by muffls

HTML

<table class="table">
    <thead>
        <tr>
            <th>Mo</th>
            <th>Di</th>
            <th>Mi</th>
            <th>Do</th>
            <th>Fr</th>
            <th>Sa</th>
            <th>So</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dieses</td>
            <td>Dieses und jenes</td>
            <td>Dieses</td>
            <td>Dieses und jenes und noch vielmehr</td>
            <td>Dieses und jenes</td>
            <td>Dieses und jenes</td>
            <td>Frei</td>
        </tr>
        <tr>
            <td>jenes</td>
            <td>Dieses und jenes</td>
            <td>Dieses</td>
            <td>Aber und jenes und noch vielmehr</td>
            <td>Dieses und jenes</td>
            <td>Dieses und jenes</td>
            <td>Frei</td>
        </tr>
    </tbody>
</table>

CSS

/* Table Styling */
table {
    border-spacing:0;    
    width:100%;
    
    border:1px solid #ddd;    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

th {
    border-bottom: 2px solid #ddd;   
    padding:8px;
}

td {
    padding: 8px;   
}


/* Responsive Table */
@media screen and (max-width: 500px) {
    thead {
         display:none;   
    }
    
    tbody, tr, td {
         display:block;   
    }
    
    td {
        padding:8px 8px 8px 25%;
            border-top:1px solid #ddd;
    }
   
    td:first-child {
        border-top:none;
    }
    
    td:before {
        content: attr(data-title) ' ';
        display:inline-block;
        font-weight:bold;
        left: 15px;
        margin-right: 76%;
        position:absolute;

    }
    
    tr {
        margin-top:15px;   
        border-top: 2px solid #ddd;   
    }
}



* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$(document).ready(function () {
    var headerCells = $('thead th');
    var dataCells = $('tbody td');
    
    var i, labelIteration = 0, labelIterationMaxLength = headerCells.length;
    for(i = 0; i <dataCells.length; i++) {
         $(dataCells[i]).attr('data-title', headerCells[labelIteration].innerText);
        
        labelIteration++;
        if(labelIteration == labelIterationMaxLength)
            labelIteration = 0;
    }
});