JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div>
    <table id="maTable">
        <thead>
            <tr>
                <td></td>
                <td></td>
                <td>Nom</td>
                <td>Adresse</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class="ui-icon ui-icon-pencil clickable"></span></td>
                <td><span class="ui-icon ui-icon-trash clickable"></span></td>
                <td>Pierre</td>
                <td>192.168.10.89</td>
            </tr>
            <tr>
                <td><span class="ui-icon ui-icon-pencil clickable"></span></td>
                <td><span class="ui-icon ui-icon-trash clickable"></span></td>
                <td>Paul</td>
                <td>192.168.11.120</td>
            </tr>
            <tr>
                <td><span class="ui-icon ui-icon-pencil clickable"></span></td>
                <td><span class="ui-icon ui-icon-trash clickable"></span></td>
                <td>Jacques</td>
                <td>192.168.56.201</td>
            </tr>
            <tr>
                <td><span class="ui-icon ui-icon-pencil clickable"></span></td>
                <td><span class="ui-icon ui-icon-trash clickable"></span></td>
                <td>Jean</td>
                <td>192.168.10.56</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#maTable{
    background-color:#ccc;
    border:1px solid #555;
    border-collapse:collapse;
}
#maTable tbody tr:nth-child(odd){
    background-color:#fff;
}
#maTable tbody tr:nth-child(even){
    background-color:#ddd;
}
.clickable{
    cursor:pointer;
}