JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>8.5</th>
                <th>9</th>
                <th>9.5</th>
                <th>10</th>
                <th>10.5</th>
                <th>11</th>
                <th>11.5</th>
                <th>12</th>
                <th>12.5</th>
            </tr>
        </thead>
        <tbody>
            <tr class="nineteen">
                <td class="rim-size">19"</td>
                <td colspan="9" class="soon">Coming Soon</td>
            </tr>
            <tr>
                <td class="rim-size">20"</td>
                <td class=""></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
            </tr>
            <tr>
                <td class="rim-size">21"</td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
            </tr>
            <tr>
                <td class="rim-size">22"</td>
                <td class=""></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
                <td class="checked"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-wrap {
    overflow: auto;
}
table {
    width: 100%;
    min-width: 500px;
    text-align: center;
    border-collapse: collapse;
}
td {
    padding: .5em;
    border: solid 1px #ddd;
}
td.checked:before {
    content:'✓';
}