JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<table id="items">
    <thead>
        <tr>
            <th>SL.No....</th>
            <th>Description</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>let</td>
            <td>it</td>
            <td>break</td>
            <td>the</td>
            <td>layout</td>
        </tr>
        <tr>
            <td>layout,</td>
            <td>let's</td>
            <td>break</td>
            <td>it</td>
            <td>!</td>
        </tr>
        <tr>
            <td>broken</td>
            <td>table</td>
            <td>layout</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

tr :nth-child(even){
    background:gray;
}
td , th{
    border:solid;
    min-width:20px;
    height:1.2em;
    text-align:center;
}
thead,tbody,
tr {
    display:table;
    width:100%;
}
tbody tr:last-of-type td:first-of-type {
    width:100px;
    color:red;
}