JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4/th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
        <td>Cell (1,3)</td>
        <td>Cell (1,4)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
        <td>Cell (2,3)</td>
        <td>Cell (2,4)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
        <td>Cell (3,3)</td>
        <td>Cell (3,4)</td>
    </tr>
    <tr>
        <td>Cell (4,1)</td>
        <td>Cell (4,2)</td>
        <td>Cell (4,3)</td>
        <td>Cell (4,4)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid black;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}