I would like to create an HTML table, where
the table content is scrollable in x and y direction
the first row is positioned sticky to the top
the first column is positioned sticky to the left
and all cells may have different heights based on their contents
Example
There are many examples online, that satisfy some of the requirements above but non of them satisfy the last requirement.
My Approach
1. Scrolling container
I used overflow: scroll and fixed dimensions to create a scrollable container
2. & 3. Syncing cell heights
I tried to use the flex table from css tricks to sync the height of the cells.
2. Fixing cells
In addition to that I fixed the cells with css transforms.
On every scroll event I reposition the every fixed cell based on the scroll position.
That approach is obviously pretty laggy.
I didn't use position: fixed;, because this would break out the cells from the overflow area.
Demo: http://codepen.io/anon/pen/mREpPe?editors=0100
I have recently had to solve this exact problem. I found nothing out there that met my requirements, so I wrote my own.
It's not a trivial bit of code, so a bit too big to post here, but you can view / rip from here
The horizontal scroll is infinite, so you need to use the cursor keys. Might give you a good starting point?
Related
I have a table that contains 3 columns that need always stay at the left side and column that contains grid where each grid element represents one hour in day, so I need that column to be scrollable. I tried many suggested solutions, but most of them are using position absolute, which is a bad joke, since when I use it I lose advantage of table, e.g. height of row changes, those absolute positioned don't follow. And the other problem is that table consists of few Angular 2 components, it's not just plain html, which makes it harder. Is there any better solution than using position absolute?
Well, in the end I just went with this solution:
Fix and Scrollable table structure using html div
It still uses absolute columns and so fixed widths and margins, but well I can live that as long as it works. About Angular component elements representing row of table, I just gave display: table-row to it and simply put td tags inside, so no longer need to use tr.
I made this approach. I't will work for vertical and horizontal directions.
https://plnkr.co/edit/MWFJuiWsUoo39xbCwAKI?p=preview
onScrollA($evt) {
this.divC.nativeElement.scrollLeft = evt.srcElement.scrollLeft;
}
Maybe try with position: sticky; But without code, it is hard to see where the problem is.
I've seen examples here and there of a trick to use
position:absolute
on the first column of a table, and then make the rest of the table scrollable horizontally.
This works, as seen here: http://jsfiddle.net/YMvk9/4289/
However, as soon as I added the vertical scrollbar you can see that it does not scroll the frozen pane, instead, the frozen pane now sticks down from the rest of the table in a ugly sort of way.
I need the frozen column on the left to scroll vertically. Can anyone fix the jsfiddle code?
Assuming that what you want is for the user to be able to scroll the table vertically or horizontally there are several ways to achieve this. The most straightforward would be to put your headcol cells in a table all there own then position the two tables so they are right up against each other and wrap them both in a div with overflow:scroll. I did come up with a patch-work fix for your current layout though.
Here is the FIDDLE
You had several problems:
Your overflow property was only applying to the second column of the table.
Your containing div was not containing anything because it had no positioning rules so I gave it some absolute positioning and assigned the overflow:scroll: property to that.
Once you position the container absolutely it screws up the long class so I assigned that to float:right; and gave it a margin-left to account for the headcol cells.
Finally, since you are floating an element, you have to use a "clear fix" to make sure it doesn't wrap so I added a new class and a new cell to each row to fix the layout.
Hope that helps!
UPDATE: After posting I noticed one issue in that adding margin-left to your long class screwed up the way the table looked to I removed that rule and added padding-left to the div to fix the issue. There may still be a couple minor margin & padding tweaks you need to do to make the table look just right; but it works! I updated the fiddle too.
I have a large table inside a scrollable div. The table contains a person's name, followed by his details. I need the first column of the table to stay fixed while scrolling horizontally, so that the person's name stays visible while look at his details. Similar to this: HTML table with horizontal scrolling (first column fixed)
However, my table is also very large in the y direction, so when I scroll down, the person's name should also scroll up with his details. This almost solves my problem, but not the vertical scrolling.
Please help!
I was trying to solve fixed column issue where a table is inside other DIV control. While solving that, I faced the same issue and found solution via setting up container at ScrollTop property on event of "onscroll". I applied below style to the container:
.floatingStyle
{
position:relative;
background-color:#829DC0;
top:0px;
}
You can look complete solution here: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html
There are few browser related issues which are also handled there.
For vertical scrolling the problem is keeping the headers and footer fixed. The best way to do this is to actually have three tables - one for headers, one for the data (in a scrollable DIV) and one for the footer. If the table column widths are fixed then that's all you need to do. If they aren't then you'll need to use JavaScript to adjust them. But there is a trick here - a table with AUTO column widths can't be guaranteed to use widths that you specify in JS, especially if a column is empty, or a header text item is quite long.
I've handled this by setting the headers width based on the data, finding if the browser resized and then changing the data widths. Once they are close I then set the table to FIXED mode for the final adjustment.
Have a look here:
http://hifi.goneill.co.nz/cd.php
Click on Jazz, Classical buttons etc to see the tables. Also read the technical notes page as it describes the coding and try out the Ajax version too.
For your fixed column you could do something similar: have two tables and use the offsetTop of one to set the scrollTop of the other. See how my table sets the top line when you sort on a column with empty rows, or saves and restores the current row in the Ajax version when swapping between tabs.
I swear I've done this before, but maybe it was in the pre-standards bad old days. Now I can't even figure out the keywords to find possible workarounds.
So I have a table that is in a wrapper so that the x-overflow is inside the wrapper instead of expanding the window. Let's say each column is hard-set with css to be 150px. I want it so that when horizontally scrolling the wrapper, the scrollbar "jumps" 150 pixels so that the right edge of the next column is aligned with the left margin of the wrapper. In other words, you scroll by column, not by pixel, so that the left-side of the viewport is never a partial column.
By extension, it would be ideal if this could be variable-width jumping so that the columns aren't forced to be a unified width, and I'd like to have this and all of the above for vertical scrolling as well.
I thought this was a standard but overlooked option for css or at least a deprecated html style attribute, but like I said, now I can't even find the idea/concept when I Google they keywords that come to mind.
Any help (even somewhat hackish ones that get me started) is appreciated.
This ain't exactly CSS, but you can use the DOM attribute scrollLeft (and also scrollTop if you need that direction).
For more information and a bit of an example, you can refer to this page.
There are many solutions to this, but I have few constraints to add up to this problem which makes it difficult to achieve.
I was working on this table with fixed header and scrollable body using only CSS (no Javascript/jquery) and flexible column widths (so that the table gets resized on window resize). Also to make this compatible in all possible browsers including IE6.
The closest solution I could find was http://salzerdesign.com/test/fixedTable.html
But this too has a problem with centring the header text which also overflows (because of fixed height) when window is resized.
Is there a solution for this? Please help.