The overflow-x and overflow-y properties in CSS are useful for controlling horizontal and vertical overflow of content, respectively, within an element. They define how excess content that doesn’t fit into an element's specified dimensions is handled, which is particularly useful in layouts where content could be dynamic or unpredictable.
Following css properties are used to manage the overflows.
1. overflow-x: Manages the overflow of content horizontally.
2. overflow-y: Manages the overflow of content vertically.
Following are the possible values for overflow.
· visible: The default value. Content overflows the boundary of the element and is fully displayed without any cropping or scrollbars.
· hidden: Content outside the element’s bounds is clipped and not displayed. This is useful for hiding any excess content beyond the boundaries.
· scroll: Always displays a scrollbar (even if it’s not needed) for the specified direction. This is sometimes useful to indicate to users that the area is scrollable.
· auto: Adds a scrollbar only when the content overflows. This is usually the most user-friendly option when you want scrollbars to appear only as needed.
Example 1: overflow-x: hidden; overflow-y: auto;
.container { width: 200px; height: 150px; overflow-x: hidden; overflow-y: auto; }
Here, any content that overflows horizontally will be hidden. If content overflows vertically, a scrollbar will appear to allow scrolling within the element.
Example 2: overflow-x: auto; overflow-y: auto;
.container { width: 200px; height: 150px; overflow-x: auto; overflow-y: auto; }
Both horizontal and vertical scrollbars appear only if needed. This setting is often used to avoid unnecessary scrollbars but still provide access to all content.
When you want the same overflow behavior for both axes, you can use the shorthand overflow property.
.container { overflow: auto; /* Applies to both x and y axes */ }
manage-overlfowed-content.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>User Data Table</title> <style> /* Container to center the table both horizontally and vertically */ .table-container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Full viewport height */ } .scrollable-table { width: 80%; /* Adjust width as needed */ max-height: 300px; /* Set a fixed height for overflow */ overflow-y: auto; /* Vertical scroll if content overflows */ overflow-x: hidden; /* Hide horizontal overflow */ border: 1px solid #ddd; } table { width: 100%; /* Ensure the table takes full container width */ border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; position: sticky; /* Keep the header fixed at the top while scrolling */ top: 0; z-index: 1; } </style> </head> <body> <div class="table-container"> <div class="scrollable-table"> <table> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mufinella</td> <td>Godleman</td> <td>mgodleman0@opera.com</td> <td>Female</td> </tr> <tr> <td>2</td> <td>Addia</td> <td>Jardein</td> <td>ajardein1@economist.com</td> <td>Genderfluid</td> </tr> <tr> <td>3</td> <td>Raleigh</td> <td>Twinning</td> <td>rtwinning2@artisteer.com</td> <td>Male</td> </tr> <tr> <td>4</td> <td>Andre</td> <td>Oxborrow</td> <td>aoxborrow3@epa.gov</td> <td>Male</td> </tr> <tr> <td>5</td> <td>Flemming</td> <td>Izhaky</td> <td>fizhaky4@skyrock.com</td> <td>Male</td> </tr> <tr> <td>6</td> <td>Frederique</td> <td>Santacrole</td> <td>fsantacrole5@cpanel.net</td> <td>Female</td> </tr> <tr> <td>7</td> <td>Willis</td> <td>Collar</td> <td>wcollar6@amazonaws.com</td> <td>Male</td> </tr> <tr> <td>8</td> <td>Alix</td> <td>Bowcher</td> <td>abowcher7@cafepress.com</td> <td>Male</td> </tr> <tr> <td>9</td> <td>Wenda</td> <td>Shardlow</td> <td>wshardlow8@google.co.uk</td> <td>Female</td> </tr> <tr> <td>10</td> <td>Rollin</td> <td>Cofax</td> <td>rcofax9@istockphoto.com</td> <td>Male</td> </tr> </tbody> </table> </div> </div> </body> </html>
Above snippet is rendered like below.
Just scroll down to observe the behavior.
Note
· The <table> element is not intended to scroll directly because it’s designed to render its content based on available space. Browsers don’t handle scrollbars on <table> elements well since the default layout is for flow-based rendering. Wrapping the table in a div (like .scrollable-table in the example) is the common solution to get reliable scrolling behavior while working with tables.
· It’s recommended to use a container like div with overflow properties to enable smooth scrolling while keeping the table layout intact.
Previous Next Home
No comments:
Post a Comment