JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table-c">
                            <tr>
                                <td>REFERENCE NO.</td>
                                <td>DESCRIPTION</td>
                                <td>Invoice DATE</td>
                                <td>INVOICE AMOUNT</td>
                                <td>DISCOUNT TAKEN</td>
                                <td>AMOUNT PAID</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>CHECK DATA</td>
                                <td>CHECK NO.</td>
                                <td>PAYEE</td>
                                <td>DISCOUNT TAKEN</td>
                                <td>CHECK AMOUNT</td>                                
                            </tr> 
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>                           
                        </table>

CSS

.table-c {
                border: 1px solid black;
                width:100%;
                height: 30px;
                table-layout: fixed;
            }
            .table-c td {
                border: 1px solid black;
                padding: 10px;
            }