JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>    
</table>

CSS

body {
    font-family: Verdana;
    font-size: 12px;    
}
td, th {
    padding: 3px;
}
table {
    border: 2px solid darkgreen;
}
tr th {
    background-color: darkgreen;
    color: white;
    border-bottom: 10px solid white; /* giving you some extra space */
}
tr:nth-child(even) td {
    background-color: #cfc;
}
tr:nth-child(odd) td {
    background-color: #fff;
}