如何為 HTML 表格新增水平捲動？

透過水平滾動擴展HTML 表格

在處理大量資料表格時，有必要透過提供垂直和滾動來增強使用者體驗水平滾動功能。本文介紹如何在 HTML 表格中新增水平捲軸，確保無論表格內容大小都能無縫導覽。

新增水平捲軸

實現水平滾動，請依照下列步驟操作：

1. 將表格顯示為block: 設定的顯示屬性要阻止的元素。這允許表格佔據其容器的整個寬度。
   啟用水平捲動：使用overflow-x屬性並將其設為auto。這表示瀏覽器在表格內容超出可用寬度時顯示水平捲軸。

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

   登入後複製

   其他注意事項

   • 確保單元格填充整個表格，將以下程式碼新增至您的CSS:

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

   登入後複製
   • 有關更進階的滾動行為，請參閱此資源：[滾動表格標題](https://www.lizkeogh.com/html-table-caption-滾動而不浮動/)。

以上是如何為 HTML 表格新增水平捲動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！