para el contexto, estoy usando React, Node, Express, Postgres para extraer datos de una base de datos.

Tengo una tabla html en un div que se extiende por toda la pantalla. La única forma en que podía tener éxito en hacer que solo la tabla fuera desplazable tenía que agregar display: block a las secciones de encabezado y cuerpo. El problema era que mi tabla flotaba hacia la izquierda, por lo que las secciones del encabezado y el cuerpo no estaban alineadas.

Mesa en cuestión:

 <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 utilizado:

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

Por favor, avíseme si hay más información que pueda proporcionar, ¡gracias!

Hasta ahora he intentado usar display: block para poder desplazarme solo por el cuerpo. Esto funcionó, pero también rompió la estructura de la tabla. Como solución alternativa, apliqué el overflow: scroll hasta el div, pero esto no es ideal porque el encabezado de la tabla también se desplaza.