JSFiddle - React, Tailwind, and code Playground

by mflodin

HTML

<table id="collapse">
    <thead>
        <tr>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hupp</td>
            <td>Hupp</td>
            <td>Hupp</td>
        </tr>
                <tr>
            <td>Hupp</td>
            <td>Hupp</td>
            <td>Hupp</td>
        </tr>
                <tr>
            <td>Hupp</td>
            <td>Hupp</td>
            <td>Hupp</td>
        </tr>
    </tbody>
</table>
<br>
<table id="spacing">
    <thead>
        <tr>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hupp</td>
            <td>Hupp</td>
            <td>Hupp</td>
        </tr>
                <tr>
            <td>Hupp</td>
            <td>Hupp</td>
            <td>Hupp</td>
        </tr>
                <tr>
            <td>Hupp</td>
            <td>Hupp</td>
            <td>Hupp</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-spacing:0px;
}

thead tr{
    background: #ccc;
}

tr:nth-child(even){
    background: #eee;
}

th:first-child {
    -webkit-border-top-left-radius: 10px 10px;    
}

th:last-child {
    -webkit-border-top-right-radius: 10px 10px;    
}

td, th {
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-left-width: 1px;
    border-color: #aaa;
}

tbody tr:last-child td {
    border-bottom-width: 1px;
}

tbody tr td:last-child {
    border-right-width: 1px;
}