JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<body>
    <table id="maTable">
    <thead>
        <tr>
            <th>
                famille
            </th>
            <th>
                sous famille
            </th>
            <th>
                catégorie
            </th>
            <th>
                machin
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                toto1
            </td>
            <td>
                toto2
            </td>
            <td>
                toto3
            </td>
            <td>
                toto4
            </td>
        </tr>
        <tr>
            <td>
                bafu1
            </td>
            <td>
                bafu2
            </td>
            <td>
                bafu3
            </td>
            <td>
                bafu4
            </td>
        </tr>
        <tr>
            <td>
                babar1
            </td>
            <td>
                babar2
            </td>
            <td>
                babar3
            </td>
            <td>
                babar4
            </td>
        </tr>
        <tr>
            <td>
                tata1
            </td>
            <td>
                tata2
            </td>
            <td>
                tata3
            </td>
            <td>
                tata4
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tfoot>
</table>
</body>

CSS

#maTable{
    border-collapse:collapse;
}
#maTable tr:nth-child(odd){
    background-color:#EEE;
}
#maTable tr:nth-child(even){
    background-color:#DDF;
}
#maTable th{
    background-color:blue;
    color:white;
    font-weight:bold;
}