JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table>
    <thead>
        <tr>
            <th width="60" align="center" valign="top" scope="col">Type</th>
            <th width="200" align="left" valign="top" scope="col">Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" valign="top">Shipping</td>
            <td align="left" valign="top">123 Main St</td>
        </tr>
        <tr>
            <td align="center" valign="top">Shipping</td>
            <td align="left" valign="top">456 Main St</td>
        </tr>
        <tr>
            <td align="center" valign="top">Shipping</td>
            <td align="left" valign="top">789 Main St</td>
        </tr>
    </tbody>
</table>

CSS

table {
    margin: 0;
    border-spacing: 0;
}

tbody tr td:first-child {
    border-left: 2px solid #000;
}

tbody tr td:last-child {
    border-right: 2px solid #000;
}

tbody tr:first-child td {
    border-top: 2px solid #000;
}

tbody tr:last-child td {
    border-bottom: 2px solid #000;
}