JSFiddle - React, Tailwind, and code Playground

HTML

<table class="t">
        <tr>
            <td class="t">1</td>
            <td class="t top">2</td>
            <td class="t">3</td>
        </tr>
        <tr>
            <td class="t left">4</td>
            <td class="t middle">5</td>
            <td class="t right">6</td>
        </tr>
        <tr>
            <td class="t">7</td>
            <td class="t bottom">8</td>
            <td class="t">9</td>
        </tr>
    </table>

CSS

table.t {
        border-collapse: collapse;
        border:1px;
        table-layout:fixed;
    }
    
    td.t {
        border: 1px solid black;
        width: 50px;
    }
    
    td.top {
        border-bottom: 1px dashed black;
    }
    td.left {
        border-right: 1px dashed black;
    }
    td.right {
        border-left: 1px dashed black;
    }
    td.bottom {
        border-top: 1px dashed black;
    }
    td.middle {
        border: 1px dashed black;
    }