JSFiddle - React, Tailwind, and code Playground

by speakman

HTML

<table>
    <tbody>
        <tr>
            <th></th><th>Mån</th><th>Tis</th><th>Ons</th><th>Tor</th><th>Fre</th><th>Lör</th><th>Sön</th>
        </tr>
        <tr class="divider">
            <th rowspan="4">0</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr class="divider">
            <th rowspan="4">2</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr class="divider">
            <th rowspan="4">4</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr class="divider">
            <th rowspan="4">6</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
</table>

CSS

* { font-family: sans-serif; }

table {
    //border-collapse: separate;
    border: 1px solid black;
}

tr {
    border-top: 1px solid lightgray;
}

tr.divider {
    border-top: 1px solid black !important;
}

tr:first-child {
    border-top: 1px solid black;
}

td,th {
    width: 40px;
    height: 10px;
    border-right: 1px solid black;
}

th {
    text-align: center;
    vertical-align: top;
    border: 1px solid black;
    border-top: none;
}

tr + th:first-child { border-top: 1px solid black; }