How to Add Horizontal Scrolling to HTML Tables?-CSS Tutorial-php.cn

How to Add Horizontal Scrolling to HTML Tables?

Extending HTML Tables with Horizontal Scrolling

When dealing with extensive data tables, it becomes necessary to enhance the user experience by providing both vertical and horizontal scrolling capabilities. This article addresses how to add a horizontal scrollbar to an HTML table, ensuring seamless navigation regardless of the table's content size.

Adding a Horizontal Scrollbar

To achieve horizontal scrolling, follow these steps:

Display the table as a block: Set the display property of the element to block. This allows the table to occupy the full width of its container.

Enable horizontal scrolling: Use the overflow-x property and set it to auto. This instruct the browser to display a horizontal scrollbar when the table content exceeds the available width.

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

Copy after login

Additional Considerations

To ensure that cells fill the entire table, add the following code to your CSS:

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

Copy after login

For more advanced scrolling behavior, refer to this resource: [Scrolling Table Captions](https://www.lizkeogh.com/html-table-caption-scroll-without-floats/).

The above is the detailed content of How to Add Horizontal Scrolling to HTML Tables?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Avoid jQuery Conflicts When Using PrimeFaces? Next article：How Can I Stretch Text to Fill a Div\'s Width Using CSS?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn