JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-striped" id="customDataTable">
            <thead>
            <tr>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </tr>
            </thead>
            <tbody class="center">
            <tr>
                <td data-th="th1">val1</td>
                <td data-th="th2">val2</td>
                <td data-th="th3">val3</td>
                <td data-th="th4">val4</td>
            </tr>
            <tr>
                <td data-th="th1">th5</td>
                <td data-th="th2">th6</td>
                <td data-th="th3">th7</td>
                <td data-th="th4">th8</td>
            </tr>
            
            </tbody>
        </table>

CSS

@media screen and (max-width: 600px) {
    table#customDataTable caption {
        background-image: none;
    }

    table#customDataTable thead {
        display: none;
    }

    table#customDataTable tbody td {
        display: block;
        padding: .6rem;
    }

    table#customDataTable tbody tr td:first-child {
        background: #666;
        color: #fff;
    }

        table#customDataTable tbody tr td:first-child a {
            color: #fff;
        }

        table#customDataTable tbody tr td:first-child:before {
            color: rgb(225,181,71);
        }

    table#customDataTable tbody td:before {
        content: attr(data-th);
        font-weight: bold;
        display: inline-block;
        width: 10rem;
    }

    table#customDataTable tr th:last-child, table#customDataTable tr td:last-child {
        max-width: 100% !important;
        min-width: 100px !important;
        width: 100% !important;
    }
}