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.
Related
I am new to css. I am having an alignment issue in one of my html pages. I have created an invoice page, which can be viewed at: https://www.w3schools.com/code/tryit.asp?filename=G6HQYBZLNH3Y .
When you will open this page you will notice that one of DIVs is slightly more to the right and one of its edge is pointing out. i have tried multiple things but i am unable to set its alignment. I will be really thankful if anyone can solve this issue.
The Bootstrap .row class adds negative margin to the left and right, and the .col classes add padding to the left and right. You have tried to counteract this padding by adding columns to the container to wrap your rows which in turn wrap additional columns.
Try removing those wrapper columns. This will allow the previous rows with black backgrounds to extend further, the text will line up better, and then the div in question won't extend further than the previous rows.
https://www.w3schools.com/code/tryit.asp?filename=G6HS3SOMWWM8\
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?
Take this table for example: http://codepen.io/anon/pen/MwRbRy
I want to style my table so that it scrolls the thead stays at the top of the page, but it needs to keep aligned with the columns of the table, which the above doesn't.
How would I achieve this? I tried position: fixed but it doesn't keep it aligned. I also don't want to have to manually set widths on everything, as the content is dynamic.
Add to JS $('table').floatThead(); This is jQuery Library and it does the work for you
Included script :
https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js
Example in CodePen
PS: I removed position:fixed.
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
This is a bit of a continuation from this question here: dataTables - Can't get horizontal scroll & fixed column to do their job. Seems to render differently everywhere. What am I doing wrong?
I got the dataTable displaying the way I want it to, for the most part. But this is what it looks like.
I had a picture of the previous look, but I somehow managed to edit it out while posting my answer below. I didn't think you could do that.
You can still see how it looked before by going to the jsfiddle link below.
I need to know if there's a way to not only close up that gap, that the scrollbar is clearly causing, but also if there is a way to move the scrollbar to the outside of the table.
padding-right: 140px; did move it over, but also covered up the Action column. I then tried to apply a z-index to the action Column, but when I moved it over, it covers up the horizontal scroll at the bottom. I can't change the height obviously because then it won't line up with the rest of the table. Any thoughts?
It took a bit of doing and a number of failures before I figured it out. Ultimately, I ended up adding a padding to the container producing the scrollbar, added a z-index to the actions div, which was already {position: absolute;}. Then, I added some jquery that adjusted heights and widths over several things and had to tweak the styles, accordingly.
The big part of it, after the padding and z-index and positioning, was that the table that wasn't static would scroll behind the now hovering Actions Columns. So I used jquery to insert a clone of the Actions column before it (or whatever is the last column, which may or may not be Actions on other pages, for example) so it would act as a place holder and push everything to the left and the Static Actions column would now overlap the clone and everything you want to remain visible stays to the left of it. If you do this in this way, it's important that the jquery that creates the clone column, happens before the dataTable.js and/or FixedColumns.js, because it needs the table HTML to be in place so it can do it's thing properly.
Now it looks like this:
Lots of tweaking later
I used the following to remove the scrollbar gap from a fixed column datatable.
table#mainDataTable{
margin-left: 300px !important;
}
div.DTFC_ScrollWrapper div.dataTables_scroll div.dataTables_scrollBody{
padding-left: 300px;
left: -300px;
}
div.DTFC_ScrollWrapper div.DTFC_LeftWrapper div.DTFC_LeftBodyWrapper{
z-index: 1;
}
This assumes you set iLeftWidth to 300px in the FixedColumn initialization. The selectors also assume bJQueryUI: false on datatable initialization.