Bootstrap 5 Responsive Table Example

Bootstrap 5 Responsive Table Example HTML. In this Bootstrap Table, you can see we have used colspan and row span. With this HTML table design, we can also understand how to make colspan and rowspan tables.

Note: We have used Bootstrap 5 .table-responsive class to make a responsive table.

See More

• Responsive Table

Bootstrap Responsive Table HTML

<h2>Bootstrap 5 Responsive Table</h2>
<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <thead class="bg-secondary text-white">
            <tr>
                <th rowspan="2">Description</th>
                <th rowspan="2">Tax Payable ($)</th>
                <th colspan="4">Paid through ITC</th>
                <th rowspan="2">Tax/CESS Paid in cash ($)</th>
                <th rowspan="2">Interest Paid in cash (Total in $)</th>
                <th rowspan="2">Late fee Paid in cash ($)</th>
            </tr>
            <tr>
                <th>Integrated Tax ($)</th>
                <th>Central Tax ($)</th>
                <th>State/UT Tax ($)</th>
                <th>CESS ($)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="9"><b>Other than reverse charge</b></td>
            </tr>
            <tr>
                <td>Integrated Tax</td>
                <td>25,828.00</td>
                <td>25,828.00</td>
                <td>25,828.00</td>
                <td>25,828.00</td>
                <td>0.00</td>
                <td>25,828.00</td>
                <td>25,828.00</td>
                <td>25,828.00</td>
            </tr>
            <tr>
                <td>Central Tax</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
            </tr>
            <tr>
                <td>State/UT Tax</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
            </tr>
            <tr>
                <td>CESS Tax</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
                <td>0.00</td>
            </tr>                                
        </tbody>
    </table>
</div>