648
Views
8
Comments
Solved
How to make table horizontal scrollbar at the top and bottom
Question
Application Type
Reactive

I have a very long list of table records where I would like to always show scrollbar and header when user scroll down the page but couldn't figure out how to do it. 

So I have added scroll bar at the top by following the post below but user have to scroll all the way to the top again.  Is there anyway to have scrollbar at top and bottom if it's not possible with floating?

https://www.outsystems.com/forums/discussion/72231/how-to-make-the-horizontal-scroll-at-top-of-the-table/



2025-06-28 01-52-12
Marco Mateo
Solution

Hi @Constance Li


You can check this out: html - Can you have scrollbars in both parallel sides of a div? - Stack Overflow 

As far as I can understand, you will create two(2) wrappers for the table with different scrollbar location (one at top and one at bottom) 

2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Hello Constance Li ,

Can you share a OML?

Do you know that you have overflow-x and overflow-y, right?

Best Regards,

Nuno R

2025-06-28 01-52-12
Marco Mateo

Hi @Constance Li ,

You can add a horizontal flow by doing the following:

  1. Wrap your table in a container
  2. create your own reusable class with style:
    "width: 100%;overflow-x: scroll;"
  3. Use your created class in the created container
  4. Create another class for the width of the table (base on your preference). for ex. width: 20000px. then, add the class to your table that is inside the container/wrapper you created 

hope this helps :)

Regards,

Marco

2021-11-23 14-27-55
Constance Li

Hi Macro,

That's what we have currently and scrollbar is showing at the end of the table so user have to scroll to the bottom to see the horizontal scrollbar. 

Regards,

Constance

2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Hi Constance Li,

Can you share the OML? And also you what to achieve.

Best regards,

Nuno R


2025-06-28 01-52-12
Marco Mateo
Solution

Hi @Constance Li


You can check this out: html - Can you have scrollbars in both parallel sides of a div? - Stack Overflow 

As far as I can understand, you will create two(2) wrappers for the table with different scrollbar location (one at top and one at bottom) 

2021-11-23 14-27-55
Constance Li

Thanks Marco. 

That's exactly what I want but I have decided not to implement it after considering it's not user friendly to do scroll left right. 

- Constance

2021-11-23 14-27-55
Constance Li

Hi Nuno Ricardo Rodrigues,

Thanks for your reply but I have decided not to implement the scroll bar after considering it's not user friendly. 

- Constance

2022-11-02 07-18-33
Nicholas Campbell

@Marco Sacay is there no way to add the CSS straight to the table - must we enclose it in a container?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.