如何在 HTML 表格中實現垂直和水平滾動？

捲動 HTML 表格：增強垂直和水平導航

向 HTML 表格添加捲軸對於管理大型資料集至關重要。本文將引導您完成啟用垂直和水平滾動以改善使用者體驗的過程。

垂直捲動

要新增垂直捲軸，首先將表格設定為顯示非常重要：阻塞。接下來，指定它應該垂直溢出。使用以下 CSS 實現這些變更：

table {
    display: block;
    overflow-y: auto;
    white-space: nowrap;
}

水平捲動

要啟用水平捲動，請將 Overflow-x: auto 屬性套用到您的表。程式碼應類似於以下內容：

table {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

這將有效地將水平和垂直滾動條添加到表格中，從而增強用戶與大型資料集的交互。此外，此方法可確保以最少的額外格式提供無縫滾動體驗。

高級選項

如果遇到單元格未水平填充整個表格的問題，請嘗試添加以下CSS 規則：

table tbody {
    display: table;
    width: 100%;
}

這將確保表格單元格拉格拉伸以適應可用的水平空間。

透過執行以下步驟，您可以輕鬆地將捲軸新增至 HTML 表格中，從而大幅改善使用者介面處理大型資料集。

以上是如何在 HTML 表格中實現垂直和水平滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！