for context I'm using React, Node, Express, Postgres to pull data from a db.

I have an html table in a div that spans across the entire screen. The only way I could succeed in making just the table scrollable I had to add display: block to the header and body sections. The problem was this floated my table to the left so the header and body sections weren't aligned.

Table in question:

<h1>Inventory</h1>
        <div id="Inventory">
            <table className="table" id="InventoryTable">
                <thead id="InventoryHead">
                    <tr>
                        <th>Material</th>
                        <th>Thickness</th>
                        <th>Width</th>
                        <th>Length</th>
                        <th>Quantity</th>
                        <th>Supplier ID</th>
                    </tr>
                </thead>
                <tbody id="InventoryBody">
                    {inventory.map(inventory => (
                            <tr key={inventory.inventory_id}>
                                <td>{inventory.inventory_material}</td>
                                <td>{inventory.inventory_thickness}</td>
                                <td>{inventory.inventory_width}</td>
                                <td>{inventory.inventory_length}</td>
                                <td>{inventory.inventory_quantity}</td>
                                <td>{inventory.supplier_id}</td>
                            </tr>
                        ))}   
                </tbody>
            </table>
            
        </div>

CSS used:

#Inventory {
  overflow: scroll;
  max-height: 300px;
}

Please let me know if there's more info I can provide, thanks!

So far I have tried to use display: block to be able to scroll just the tbody. This worked, but it also broke the table structure. As a workaround I applied overflow: scroll to the div instead, but this isn't ideal because the table header gets scrolled as well.