How to fit the height of the particular cell in the HTML table?

DESIGN In this design, I have the confusion on the GST SUMMARY column, which doesn't come with the row-wise and also it height is different compared to other cell. I genuinely confused and struck on this design.

I want the idea for to design this HTML Table or Sample code to learn.

Solution

Here's an example of how to reduce the size of a specific cell in your table:

<!DOCTYPE html>
<html>
<head>
    <title>Sample HTML Table</title>
    <style>
        /* Apply styles to the specific cell or cells you want to resize */
        .small-cell {
            width: 50px; /* Set the width of the cell */
            height: 30px; /* Set the height of the cell */
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>Product A</td>
            <td>$10.00</td>
            <td class="small-cell">3</td> <!-- Apply the small-cell class to this cell -->
            <td>$30.00</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>$15.00</td>
            <td>2</td>
            <td>$30.00</td>
        </tr>
        <!-- ... other rows ... -->
    </table>
</body>
</html>

In this example, we've added a CSS class called small-cell and applied it to the cell where you want to reduce the size. You can adjust the width and height values in the .small-cell style rule to control the size of that specific cell. This way, you can customize the size of individual cells in your table while keeping others at their default sizes.