How Can I Create HTML Tables with Both Vertical and Horizontal Scrollbars?

Achieving Vertical and Horizontal Scrollbars in HTML Tables

Creating tables that require both vertical and horizontal scrolling can be challenging. Here's how to achieve this using CSS:

1. Display as Block: Set display: block for the table to treat it like a container.


2. Enable Horizontal Scroll: Apply overflow-x: auto to enable horizontal scrolling.


3. Prevent Line Breaks: Use white-space: nowrap to prevent excessive line breaks within table cells.

The following CSS code exemplifies this approach:

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

Example:

<table>

Additional Considerations:

• To ensure cell width distribution, add table tbody { display: table; width: 100%; } to the CSS.
• Refer to external resources for more advanced examples, such as scrolling table captions.

The above is the detailed content of How Can I Create HTML Tables with Both Vertical and Horizontal Scrollbars?. For more information, please follow other related articles on the PHP Chinese website!