JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div class="table-wrapper">
    <table border="1" frame="vsides" rules="rows">
        <caption>Contact Information</caption>
        <col>
            <col class="second">
                <col>
                    <col>
                        <thead>
                            <tr>
                                <th scope="col" rules="cols">Name</th>
                                <th scope="col">Phone#</th>
                                <th scope="col">Fax#</th>
                                <th scope="col">City</th>
                            </tr>
                        </thead>
                        <tr>
                            <th scope="row">Joel Garner ipsum loriem dgasdg adfgajjkll asgfasgas hqewiuth</th>
                            <td>412-212-5421</td>
                            <td>412-212-5400</td>
                            <td>Pittsburgh</td>
                        </tr>
                        <tr>
                            <th scope="row">Clive Lloyd</th>
                            <td>410-306-1420</td>
                            <td>410-306-5400</td>
                            <td>Baltimore</td>
                        </tr>
                        <tr>
                            <th scope="row">Gordon Greenidge</th>
                            <td>281-564-6720</td>
                            <td>281-511-6600</td>
                            <td>Houston</td>
                        </tr>
    </table>
</div>

CSS

.table-wrapper {
    margin: 2em;
    border: 1px dotted red;
    /* overflow: hidden; */
}
thead th {
    background-color: red;
}
[scope="col"] {
    width: 25%;
}
table {
    border-spacing: 10px 0;
    border-collapse: separate;
    display: block;
    margin: auto -10px;
}
th, td {
    padding: 5px;
    border-bottom: 0;
}
th:first-child, td:first-child {
    background-color: pink;
    //display: block;
    //width: 90%;
    //position: absolute;
    //-webkit-box-sizing:border-box;
}
/*
col {
    width: 100%;
    float:left;
    clear:left;
}
*/
 col.second {
    background-color: beige;
    float: left;
    display: block;
}
th:nth-child(3), td:nth-child(3) {
    background-color: yellow;
    /* display: block; */
    clear:left;
    /* width: 100%; */
}
@media (max-width: 600px) {
    [scope="col"] {
        //display:block;
        //width: 100%;
    }
    rowgroup {
        display:block;
        width: 100%;
    }
}

JavaScript

// Responsive Tables