在 React 中，如何使 html 表格的 tbody 可滚动？答案

【问题标题】：In React, how do I make the tbody of an html table scrollable?在 React 中，如何使 html 表格的 tbody 可滚动？
【发布时间】：2022-07-11 23:54:53
【问题描述】：

对于上下文，我使用 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，但这并不理想，因为表格标题也会滚动。

【问题讨论】：

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

只需给出表格宽度#InventoryTable { width: 100% }。

【讨论】：

【解决方案2】：

您可以指定 100% 的宽度并指定仅在 x 轴上滚动。

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

【讨论】：