JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<table>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
</table>


<table>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
</table>


<table>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
</table>


<table>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
    <tr>
        <td>id</td>
        <td>first name</td>
        <td>last name</td>
        <td>any data</td>
    </tr>
</table>

CSS

table {
    width: 100%;
    margin-bottom: 30px;
}

td {
    outline: 1px solid;
    padding: 10px;
}

td:nth-child(1) { width: 10px; }