1051
Views
8
Comments
How to make horizontal scrolling for the table?

Hello!

I try to make horizontal scrolling for a table like in this example. The first column of the table must be static. Maybe anyone have an idea how to do this?

Thanks in advance,

Mariia

Capture56.PNG
UserImage.jpg
Accelance Partners

Hi @Mariia Chala,
have you tried this widget? you can drop your table into this placeholder
Thanks
Shriyash

UserImage.jpg
Mariia Chala

Hello Shriyash,

Thanks for you reply.

I tried this widget but it doesn't work with my table. Maybe there are some other variants?


Thanks

Mariia

2023-10-23 05-14-43
Pradeep Patil

Hello @Mariia Chala,

You can also put that table in a container set its width accordingly and simply give this ( overflow-x: scroll; ) css to the container.


Regards

UserImage.jpg
Mariia Chala

Hi Patil,

Thanks for your answer.

The table has two objects thead and tbody.

I put scroll on tbody it moves and thead dosn't move

It seems that only vertical scrolling is possible?


Thanks,

Mariia



2023-10-23 05-14-43
Pradeep Patil

Hello, 

Have you only applied css to the tbody?

You can put that table in container and set it's width like 500px and apply the given css to the container not on table.

Regards

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi,

You could also first search the forum and find this questions is already provided with multiple solutions in the past:

https://www.outsystems.com/forums/Search.aspx?page=1&q=horizontal+scrolling+for+the+table&scat=forums

Regards,

Daniel

2022-07-03 17-24-08
Sourabh sharma

Hi Mariia Chala;

To make horizontal scrolling in table keep the table inside the container  and write this given CSS in

Style Classes : "Scrollable_Wrap" Create a class with the same name in "Style Sheet Editor"

like

.Scrollable_Wrap{   max-height: 300px;   overflow-x: hidden;   }

and you can customize it accordingly..

Hope this will help you!!!

Kind Regards.

Sourabh


2022-07-03 17-24-08
Sourabh sharma

Hi Mariia Chala; 

did you try this?

.Scrollable_Wrap{   max-height: 300px;   overflow-x: hidden;   } 

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