Keep table column headings showing when scrolling

replied on July 7, 2021

I have done horizontal scrolling of a table while keeping some columns static. This CSS might help you get started, or just cause frustration.

Regarding static columns, I had to make sure the proper th cells had a position of "absolute" and a high z-index. Not sure if you would need something like that for your thead or not.

.HorizontalScroll .cf-table{
  width: 5000px;
}


.HorizontalScroll .cf-table_parent{
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

0 0

replied on July 8, 2021

I'm a newbie with this, so I'm not sure what you mean by make sure the proper th cells had a position of "absolute" and a high z-index. Just applying the CSS and adding the .HorizontalScroll class to my table did not work.

0 0

replied on July 12, 2021

Yeah, definitely wrote that assuming comfort with CSS. Sorry to confuse you, though if this is important you'll need to Google around a bit.

The z-index I don't think is really necessary. I got it working, sort of, this way. Two important caveats:

So far, I don't see how to change the width of the fields. If that's important, it may take some time to figure out.
I had to set a pixel width for the body of the table, which you'll have to experiment with for your form size. Doing it by % didn't work.

Also, note that I have changed the table class to VerticalScroll

.VerticalScroll .cf-table_parent tbody{
  display: block;
  height: 150px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: scroll;
}

One more thought, hopefully not to add more confusion. In the above code if you get rid of tbody you can drop the "width" and things seem to work a bit nicer. You might be able to get around some of the goofiness by hiding the table's header (via CSS) and using HTML or even another copy of the table with just the header right above the scrollable table.

0 0

Question

Question

Keep table column headings showing when scrolling

Replies

Sign in to reply to this post.