JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<!DOCTYPE html>
<html>
<body>
    <table>
        <thead>
            <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
        </thead>
        <tbody>
            <tr class="odd first-row"><td>Value 1</td><td>Value 2</td><td>Value 3</td></tr>
            <tr class="even"><td>Value 4</td><td>Value 5</td><td>Value 6</td></tr>
            <tr class="odd"><td>Value 7</td><td>Value 8</td><td>Value 9</td></tr>
            <tr class="even last-row"><td>Value 10</td><td>Value 11</td><td>Value 12</td></tr>
        </tbody>
    </table>
</body>
</html>

CSS

table {
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
    border-collapse: collapse;
}
td,th {padding: .5em 1em;}

/* Shadow on the header row*/
thead tr   { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th         { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

/* I would like spacing between thead tr and tr.first-row */

tbody:before {
    /* This doesn't work because of border-collapse */
    line-height:1em;
    content:"_";
    color:white;
    display:block;
}