使用水平滚动

在处理广泛的数据表时，在处理垂直滚动和水平滚动能力来增强用户体验时，必须使用水平滚动。 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/）。