JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<table>
    <thead>
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
        <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
         <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
         <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
         <tr>
        <td>5555</td>
        <td>5555</td>
        <td>adn;adjn;</td>
        </tr>
    </tbody>
</table>

CSS

table, th, td {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
table {
    width: 100%;
    table-layout: fixed;

    -webkit-box-shadow: inset 5px 5px 5px -2px rgba(0,0,0,.4);
    box-shadow: inset 5px 5px 5px -2px rgba(0,0,0,.4);
}
thead tr {
    display: block;
    position: relative;
}
thead th {
    background-color: #e0e0e0;
}
tbody{
    display: block;
    width: 100%;
    height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /*-webkit-box-shadow: inset 5px 5px 5px -2px rgba(0,0,0,.4);
    box-shadow: inset 5px 5px 5px -2px rgba(0,0,0,.4);*/
    }
thead th:first-child,
tbody td:first-child {
    width: 40%;
}
thead th:nth-child(2),
tbody td:nth-child(2) {
    width: 30%;
}
thead th:nth-child(3),
tbody td:nth-child(3) {
    width: 30%;
}