I have a div that is effectively displaying tabular data. I need the first row to always display as well as the first two columns. What I initially tried doing was wrapping everything except for the first two columns in a div with overflow-x: scroll set, but that doesn't seem to be working. If someone could give me a few pointers I would appreciate it.
http://jsfiddle.net/ekfdcqrm/34/
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 have a pretty straight forward table, date ranges cross the x-axis and titles down the y-axis. My table its self has lots of columns, so many so that I need to scroll to the right in order to see all of the data.
I would like to, if possible have my first column which has all of the row titles always display on the screen as I scroll across the page. If possible, I have no idea how to even approach this... Can anyone point me in the right direction?
You could separate your table into two separate tables (the first column as the first table, and the rest as the second). Then, you can either place the first table in a div with position set to fixed at left:0 and top:0, or just set the second div (which contains your second table) to have overflow:auto.
Also, remember to move the second div to the right, otherwise they will be on top of each other!
Hope that helps!
I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.
Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.
I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.
Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?
Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).
Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/
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.
Please look at the following page in IE9..
www.homextreme.co.za/default_test.aspx
I have added borders on some of the tables for debugging purposes
On the left choose any region from the dropdown, the page will refresh..
On the right you will see there is now a gap below the table on the right.
I have googled for ages and searched for IE9 table bug fixes and tried them but for the life of me I cannot get that cell to size correctly. Can somebody please help me with a solution for this?
Link to screenshot before I expand the directory on the left.
Link to screenshot after...
Thanks
After making a selection from the list you get a long list on the left column. Since all the content is inside a bigger table (oy tables inside tables inside tables), the right column has to expand vertically.
In the right column there are two cells on on top of the other one (plus the one in the middle for spacing). The one in the top includes the table with the space you don't want, the cell in the bottom has a bunch of other smaller sections. The top cell expands vertically and ends up being taller than the content, and that's the extra space you see. If you change the vertical alignment (vAlign) of that cell (1st row, 3rd cell) to top, you'll see the space move to the top.
The reason it doesn't show up in other browsers is that they probably have different row height algorithms and make the 1st row as small as possible and leave the rest to the 2nd and 3rd. And then IE uses percentages or makes the rows proportional to the content or something.
I'm not sure what to suggest you do to fix this. If you're going to stick to tables for layout, just use one row and have a cell for each column, and keep the content of each column in the same cell instead of splitting it in rows.