I have a page which consists of some header information on the top and a table below it. The header is expanded onLoad and the table is set to a max-height of 500px. This table will then be scrollable by default and its thead is sticky.
However, there's an option to collapse this header div, which then sets the table's max-height to fit-content. Now, the whole page is scrollable instead of just the table. Problem is, the thead is no longer sticky.
$("#table").css({ "max-height": "500px" });
https://jsfiddle.net/3k2vnqyh/ is an simple example. Notice the thead is sticky when you scroll, then click the button which hides the div and gets rid of the table's scroll and makes the page scrollable instead, but also gets rid of the sticky thead. I'm just trying to unconditionally have the thead remain sticky. I'm using Chrome btw.
This seems to be a popular topic. I've tried solving it with css by using a variation of making the thead and "tds of the thead" have sticky positions and other attributes. But no dice. I'm using Bootstrap too.
Any ideas
Related
It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work
I would like to scroll each row horizontally. So on right arrow keypress normally the whole row should scroll to the left. In fact it was scrolling, before I added display: table in order to get the real width of row.
How to scroll .row?
Example, to show problem(need resize client area to show 2 cells):
https://jsfiddle.net/souren/98rddfzp/8/
Instead of using display: table, try using box-sizing: border-box.
Check this and this.
Here's your updated fiddle.
I'm trying to get this ng-table to play nice: http://jsfiddle.net/orarbel/ADukg/8102/
This is how I get the header to be fixed:
thead, tbody {
display: block;
}
The problem is the header width and and body width are not the same, the scrolling get broken, and I can't get the CSS right.
I'm basically trying to figure out how to style this table so that the header is fixed and if there is a horizontal overflow the header and body would still be aligned.
Suggestions?
I want to create a table like structure without using table,tr,td etc tags. The table should have its first column and headers fixed. I have fiddled it under this URL: http://jsfiddle.net/RtfZu/.
I am not able to create a vertical scroll-bar, which upon scrolling should scroll the frozen column too.
Any insights?
You need to make your .table-body-scroll div scrollable. In the fiddle it breaks due to the a width issue causing a double scroll bar, but you should be able to fix that by adjusting the width and setting the overflow-x to hidden
.table-body-scroll
{
overflow-y:scroll;
}
http://jsfiddle.net/RtfZu/3/
Try adding overflow-y: auto; and define a height to your .table element. This should scroll the entire table
By the way, i have created a jQuery plugin that would render table using tags. The table is configurable too. code4devs.com is the URL
I want to create table with fixed header. And scroll tbody left and down. If I do thead and tbody as blocks (set style display:block and position:relative) it works for me in all browsers except IE. For IE I need to set position:fixed. But if I use position:fixed after dynamically adding new row the scroll position is reset.
Example: http://jsfiddle.net/9nezW/33/
How can I make tbody scrollable with use position:relative in IE?
Thanks
Try setting overflow: auto in the tbody's css.
An example I found here: http://monolinea.com/clients/csstests/tablescroll.html has a table that works in IE, still trying to figure out the differences between mine and theirs. May help you to take a look at it's source.