Html table scroll horizontal

Making Tables Scrollable in CSS

Because HTML tables are set to display: table by default, adding scrollbars to them is a bit nonintuitive.

We can set our tables to display: block and modify their overflow from there, but I’ve found wrapping tables in containers to be more adaptable and flexible.

Link to this section

Vertical table scrollbars

First, let’s set up vertical scrolling.

div class="tableContainer"> table class="table"> . table> div> 

We can set a height for the table’s container and modify the table such that it will fit snug within the container:

.tableContainer < height: 300px; overflow: hidden; > .table < position: sticky; top: 0; width: 100%; > 

In this example, I set the height to 300px — but you can set it to whatever you want!

Our table will now have an inset vertical scrollbar and will expand no further than the height we set.

Link to this section

Horizontal table scrollbars

If you want to implement horizontal scrolling, there is an approach very similar to the vertical scrolling example:

.tableContainer < overflow: hidden; width: 800px; > .table < position: sticky; top: 0; width: 100%; > 

I set the width here to 800px , but again, you can change it to whatever you want.

If you want both horizontal and vertical scrollbars for your table, simply specify both a height and a width in .tableContainer .

Link to this section

And that’s how you can make your tables scrollable with just a bit of CSS!

I refer back to this snippet all the time, and I hope you found it useful too.

Источник

Scrollbar in HTML Table

Scrollbar in HTML Table is one of the features to scroll the data from horizontal and vertical formats. In default, a vertical scroll bar enables after entering the number of data to maximize size in the vertical mode. But in horizontal mode, after entering the data in paragraph format and not wrapped, the page contains the right arrow as the option to enable the data in the horizontal scroll bar. We have customized the scroll options with the help of mouse pointers. We can also allocate the scroll tables’ border, height, and width.

Web development, programming languages, Software testing & others

Creating a Scrollbar in HTML Table

When the text box’s content is too large to fit in, an HTML Scroll box will ensure that the box grows scroll bars. Some applications, like mobile apps, use scroll boxes, which will display their features, but big mobile screens will display it good some small mobile screens compatibility, it will not display on the screen, i.e.)application feature, which is to be used in the scroll box. Some plugins are needed to show some features in web applications that are to be used in the browser screen. Suppose we want to add a scroll bar option in HTML, use an “overflow” option, and set it as auto-enabled for adding horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.

Using the tag, we will add the scroll options to HTML Page.

Examples of Scrollbar in HTML Table

Given are the examples for the HTML table:

Example #1

    .divScroll  
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
  

In the above example, we have enabled scrolling in horizontal and vertical bars; scrolls will automatically enable if the text exceeds the text box limits.

Example #2

  .divScroll  Welcome to my domain   

In the above example, we used the ; we will show the text within the marquee using the scroll option. We can use animate the text in the scroll bars. Different sets of like Faster Scrolling, Faster Bounce, Text scrolling down, Text Scrolling Up, Jumping Text, Normal Speed, etc., are also used.

Example #3

In the example below, we will use the alert function of how much data will be displayed on the web page in pixel format.

    
Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain 
 alert( getComputedStyle(example).width )   

Example #4

    
  Welcome to my domain Name Email  Sivaraman Sivaraman [email protected] 
   

Example #5

Here we are going to see the Various Types of Scroll Boxes in HTML

• Colored Scroll Boxes
• Customized Scrollbars
• Scroll box with images
• Scroll Box with Borders

1. Colored Scroll Boxes

In the scroll box option, we have added the different types of colors in the text box space areas, as shown in the example below:

  
Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain
  

In the above example, we have specified the colors in the text, the same in the scroll panel.

2. Customized Scrollbars

We have customized the scroll bars using Webkit extensions; it will work in the browsers.

    body < margin-bottom: 200%; >.scroll < border: none; padding: 5px; font: 24px/36px sans-serif; width: 200px; height: 200px; overflow: scroll; >::-webkit-scrollbar < width: 12px; height: 12px; >::-webkit-scrollbar-track < border: 1px solid yellowgreen; border-radius: 10px; >::-webkit-scrollbar-thumb < background: yellowgreen; border-radius: 10px; >::-webkit-scrollbar-thumb:hover  
Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain
  

In the above codes, we see scroll options on the full page. It’s our customized option; we have enabled the scroll options in the full background screen. Once, we also checked the browser Compatability because sometimes the tool –Webkit in the CSS style does not accept some browsers. For example, Microsoft has the –ms- extensions and other browser vendors like –Webkit- extensions.

3. Scroll Box With Images

We have also used Scroll boxes in background images or foreground images. Let us see some basic examples of this feature.

4. Scroll Box Borders

We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:

Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.

The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.

Features of Scrollbar in HTML Table

When we use the Scroll box, it may have some features like.,

• Simple and lightweight
• Autoplay
• Multiple instances on one page
• Useful options for customizing your text in a scrolling
• We can also use the jquery library in scroll boxes for features like Previous/Next navigation buttons

Conclusion

In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.

Recommended Articles

This article is a guide to the Scrollbar in HTML Table. We discuss creating a Scrollbar in Html Table and some features and examples. You can also go through our other suggested articles to learn more–

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests
125+ Hours of HD Videos
33 Courses
9 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник

How to make Table Horizontally Scrollable for Small Screen size

In the era of responsive web design, ensuring optimal user experiences across various devices is crucial. However, presenting large tables on small screens can be challenging, often leading to content overflow and a compromised user interface. Fortunately, there’s a solution: making tables horizontally scrollable.

By enabling horizontal scrolling for tables on small screen sizes, we can provide users with a seamless and intuitive way to explore tabular data without sacrificing readability or functionality. In this article, we will dive into the techniques and best practices for creating horizontally scrollable tables, ensuring a delightful user experience on every screen size.

With the growing use of websites on Mobile screens, the need for solving issues related to the responsiveness of HTML components has increased. One such component is the HTML table.

Generally, HTML tables do not break UI in the case of a desktop but because the screen size of mobile devices is small, and if you have a table that has more than 4-5 columns then most likely the table will extend out of the UI and you will see a horizontal scroll bar, which is not very good as far as user experience is concerned.

There are two ways to solve this:

How to make Table Horizontally Scrollable for Small Screen size

Keep the table inside a div Container

We can enclose the table in a tag and provide the following styling to the tag:

To make it even better, we can even set a width for column tables:

It is not necessary to have this style for evry screen size and you can only add this for screen size smaller than say 556px or more, using the @media query in CSS.

@media (max-width: 600px) < .table-container < width: 100% !important; overflow-x: scroll; >th, td >

Making the table horizontally scrollable

This is a better solution and we have implemented this in our website too. With this solution, you do not have to enclose the table inside any other tag, as this style rule is applied directly to the table tag.

Just like we used the @media query above, for this CSS styling too, we can use the @media query to apply these CSS style rules only for small screen sizes.

Conclusion:

Tables are a powerful means of organizing and presenting data, but they can pose challenges when it comes to small screen sizes. By implementing horizontal scrolling for tables, we can optimize the user experience and ensure that tabular data remains accessible and easy to navigate on any device.

Through CSS and JavaScript techniques, we can enable fluid horizontal scrolling, allowing users to explore the complete table content effortlessly. As we strive for responsive and user-friendly designs, mastering the art of creating horizontally scrollable tables becomes a valuable skill for web developers. So, incorporate these techniques into your projects, and unlock the full potential of tables on small screens.

Hope these two solutions help you in making your HTML table responsive and improve the user experience on your website. If you face any issues, please share them with us in the comment section below.

Frequently Asked Questions(FAQs)

1. Why do tables become problematic on small screens?

Tables can become problematic on small screens because they are often wider than the available viewport width. This can result in content overflow, requiring users to scroll horizontally to view the entire table, which can be inconvenient and hinder the overall user experience.

2. How can I make a table horizontally scrollable?

You can make a table horizontally scrollable by wrapping it in a container element with a fixed width and setting the CSS overflow property to «auto» or «scroll.» This allows the table to exceed the container’s width and enables users to scroll horizontally to view the hidden content.

3. Should I use CSS or JavaScript to make tables scrollable?

CSS alone can be used to make tables scrollable. However, if you require more advanced functionality, such as dynamic resizing or touch gestures, JavaScript can be utilized to enhance the scrolling behavior.

4. Are there any best practices for designing scrollable tables?

Yes, there are several best practices for designing scrollable tables. It’s essential to ensure that the table headers remain visible as users scroll horizontally. Additionally, optimizing the table for touch devices, considering performance implications, and testing the scrolling behavior on different screen sizes are all crucial steps.

5. Can I apply custom styling to a scrollable table?

Absolutely! You can apply custom styling to a scrollable table using CSS. You have full control over the table’s appearance, including fonts, colors, borders, and backgrounds. Custom styling allows you to match the table design to your overall website or application aesthetics.

You may also like:

Источник