How can I horizontally Scroll some columns and rows in html table?

HTML & CSS
1

I want to scroll horizontally all other columns except Columns A and B in my HTML table? Is there any property in HTML or I have to go for JS for this desired functionality?
Help me Please.

2

Can you show us your table code?

3

I have just simple table. You can tell me HTML property to scroll?

4

I ask because it doesn’t seem to make much sense to scroll some columns and not others.

1 Like
5

Always remember if you show the code, There are more chances of getting the solution faster.

Hello while surfing I have found this solution, Hope it will work with the table you have created.

You can use sticky position. Here is a sample code. This is HTML/CSS solution. No js is required.

Source:

https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b
1 Like
6

You can use position:sticky to fix the first column easy enough which is good for tables that are wide and you want to scroll sideways without losing the first column headers.

Here’s a very old example.

If you want to stick the first two columns then it gets a bit more complicated as you probably have to resort to fixed widths for those first two columns (or just the first column).

I’m not sure what use case there could be for other columns not scrolling sideways unless it was the last column perhaps.

2 Likes
7

Here’s an example with the first 2 columns sticky but the first column will need to be a fixed width for this to work.

Resize the window smaller so that the scroll takes effect.

1 Like
8

Thank you so much for this answer.

1 Like
9

Ok, I got it. Thank you

10

I really need this. This code helps me a alot. Thank you for this code. I appreciate you reply.
With best Regards:

11

If he is not the last what to do then?

12

I can’t see a use case for fixing any other columns apart from the first one (or two) or the first and last columns. Otherwise when the data scrolls you will get your middle columns being static and that would be very confusing with content going underneath and appearing out the other side. I would suggest instead that the data is re-organised so that non scrolling columns are only start and end columns.

2 Likes
13

Good suggestions. Really helpful and I done my required functionality.
Ok Thank you!

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.