在 React 中，如何使 html 表格的 tbody 可滾動？

Question

對於上下文，我使用 React、Node、Express、Postgres 從數據庫中提取數據。

我在跨越整個屏幕的 div 中有一個 html 表。 我可以成功使表格可滾動的唯一方法是我必須將display: block添加到標題和正文部分。 問題是這使我的表格向左浮動，因此標題和正文部分未對齊。

有問題的表：

<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：

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

如果我可以提供更多信息，請告訴我，謝謝！

到目前為止，我已經嘗試使用display: block來滾動 tbody。 這行得通，但它也破壞了表結構。 作為一種解決方法，我應用了overflow: scroll到 div，但這並不理想，因為表頭也會滾動。

Answer 1

只需給出表格寬度#InventoryTable { width: 100% } 。

Answer 2

如果要在水平位置滾動，則可以指定 100% 的寬度並指定滾動，然后使用 overflow-x:scroll。 如果你想垂直滾動然后溢出-y：滾動。

#InventoryBody {
Width: 100%;
Overflow-x: scroll;
}