使用水平滾動

在處理廣泛的數據表時，在處理垂直滾動和水平滾動能力來增強用戶體驗時，必須使用水平滾動。 This article addresses how to add a horizo​​ntal scrollbar to an HTML table, ensuring seamless navigation regardless of the table's content size.

Adding a Horizo​​ntal Scrollbar

To achieve horizo​​ntal scrolling, follow these steps:

Display the table as a塊：

將

元素的顯示屬性設置為阻止。這允許該表佔據其容器的完整寬度。 啟用水平滾動：

使用Overflow-X屬性並將其設置為自動。此指示瀏覽器在表內容超過可用寬度時顯示水平滾動欄。
Additional Considerations
To ensure that cells fill the entire table, add the following code to your CSS:

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

table tbody { 顯示：表; 寬度：100％； }

有關更高級的滾動行為，請參閱此資源：[滾動表字幕]（https://www.lizkeogh.com/html-tml-table-caption-caption-scroll-scroll-without-floats/）。