JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <thead>
            <tr>
                <th>Item #</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Price Unit</th>
                <th>Price Total</th>
            </tr>   
        </thead>
        <tbody>
            <!--!important -->
            <tr>
                <td colspan="5">&nbsp;</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Prod A1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Prod B1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Prod C1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Prod D1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Prod A1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Prod B1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Prod C1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
            <tr>
                <td>8</td>
                <td>Prod D1</td>
                <td>5</td>
                <td>USD 3.00</td>
                <td>USD 15.00</td>
            </tr>
        </tbody>
    </table>

CSS

table{
    border-spacing: 0;
    display: flex;/*Se ajuste dinamicamente al tamano del dispositivo**/
    max-height: 40vh; /*El alto que necesitemos**/
    overflow-y: auto; /**El scroll verticalmente cuando sea necesario*/
    overflow-x: hidden;/*Sin scroll horizontal*/
    table-layout: fixed;/**Forzamos a que las filas tenga el mismo ancho**/
    width: 98vw; /*El ancho que necesitemos*/
    border:1px solid gray;
}

thead{
    background-color: #f1eee9;
    position: fixed !important;/*el thead va ser siempre estatico**/
}

th{
    border-bottom: 1px solid #c4c0c9;
    border-right: 1px solid #c4c0c9;
}

th,td{
    font-weight: normal;
    margin: 0;
    max-width: 18.5vw; /**Ancho por celda*/
    min-width: 18.5vw;/**Ancho por celda*/
    word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
    font-size: 11px;
    height: 3.5vh !important;/*El mismo alto para todas las celdas**/
    padding: 4px;
    border-right: 1px solid #c4c0c9;
}
tr:nth-child(2n) {
    background: none repeat scroll 0 0 #edebeb;
}