I have a wide table, and I want to create the table with both horizontal and vertical scrollbar, and the table could have a fixed header on top
the horizontal one need to scroll the column with the header at the same time
the vertical one should appear all the time
I tried using css overflow, but most example just give me vertical scroll with fixed header, no horizontal one
Add
position:fixed;
in the css class of your header . The header will remain still when you make a scroll.
Not sure whether this is what you expect.
Related
I'm developing a solution that presents table like data to the user and the requirements are as follows:
Horizontal scrolling within fixed dimensions. As you scroll horizontally the first column must be sticky and follow the user as they scroll.
Vertical scrolling with a sticky header as the user scrolls up or down they can always see the header.
Found one solution here: http://www.fixedheadertable.com/ which does what I want however, after implementing with my site the table changes width based on the window dimensions. This is not ideal.
I've posted multiple questions on here about this with no conclusive answers.
Primarily asking if anyone knows of any plugins or done something similar to point me in the right direction.
Apply exact width for each column. I hope the sticky header and table contents are in separate tables. So you have to specify width for header as well as table content separately. For example the first <td> of sticky header and first <td> of tabular data should have same width. apply width like this for all columns.
Try SlickGrid:
SlickGrid is an advanced JavaScript grid.
Some highlights:
Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
Column resize/reorder/show/hide
I have made table which have some multiple feature like:
sortable
check and uncheck all
resizable column
table header which is fixed on the top
for scrollbar I am using mCustomScrollbar
Now what I want when I am using mCustomScrollbar it’s working nice but the problem is that. My table header is fixed when I am scrolling vertically its fine. But when I scroll horizontally the table header not sliding according to that. Please help me out of this I want fix the table header when I scroll vertically and when I scroll horizontally it should slide.
here is the example made by me:
https://cloud.csdcsystems.com/ui-prototype/html/approved-html/table/table-sorting.html
The issue is illustrated in the first column of this JSFiddle.
Basically, I want to make a first column in a table that stays fixed when scrolling horizontally, but not vertically. I found a solution here, but this only works when there isn't a vertical scrollbar. With that included, the first column leaves the flow of the containing div and the scroll bar doesn't apply to it.
How do I get around this? Is there a way to do this without position:fixed or position:absolute? I had the idea of hiding the portion of the first column that flows out of the scrollbar, but I'm not sure how this is implemented.
Situation:
I have a div with scrollbar: (overflow: auto;)
In this div I have a table with a table-head
When I scroll through the table-body, the header is not visible (like when you scroll through a website window)
What I want:
When the user will scroll through my table, the table-header should have position fixed.
Simple position fixed ( <thead style="position:fixed;">) did not help, since the table header is like 50 cells wide so you have to scroll right/left to see all the cells.
I absolutely dont know where to start, any ideas will be appreciated.
Found answers
I found lots of similar problems on stack overflow, but none of them explicitly told me how to apply the fixed header to be scrollable horizontaly in the div.
http://jsfiddle.net/TGBym/44/ -> a fidle by Dhaval Shukla from this post, but doesnt seem to be checking on the horizontal scrolling..
Is it possible to show horizontal scroll bar of div at top of div via javascript or CSS without jquery. By default it comes at bottom.
I goggled for it but did not got any help.
Try this Fiddle, it has scroll bars in top, This is based on How can I get horizontal scrollbars at top and bottom of a div?