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!
Related
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/
I have a List that contains a Table. The List is sized sufficiently that the table should be able to fit 10ish rows, which is more data than should ever come out in that table so that should be fine.
My problem is that as rows are generated in the Table, it causes the List to resize as if it needed to grow to accomodate the rows. I thought that the ConsumeContainerWhiteSpace property was intended to prevent this behaviour however that setting does not make a difference.
Here's an example (cropped to avoid some data appearing); as you can see the left hand List, which is the only one in which the Table contains some data, has expanded vertically even though there is plenty of room for the table within the list.
How do I prevent this?
Put your list in a second rectangle. Setup the rectangle to show its border. That way you have a border with a constant size from the rectangle.
Create a rectangle
Setup rectangle border to appear
Create a list that populates based on your data
Drag and drop the list into the rectangle
Note that I did notice that the rectangle will grow in size if the list has enough elements to expand beyond the rectangle border. This shouldn't be an issue in your case, but it could impact someone else.
I am working at a rdlc report and i want to Place a logo at the right most corner of the last column.
I placed it at fixed position at the top of last column. but when in a case a column hides in between than last column moves toward left but logo will remain at the same place and it creates a logo formatting issue.
please suggest an appropriate solution.
You have fallen foul of the inability of Reporting services to dynamically alter the location of items. It is not possible for you to automatically align this logo - without embedding it as part of a table. There are two ways around this problem.
Option 1
Add a new header row to your table. Merge the cells together. Insert a rectangle into it, and insert your logo on to this, as shown
The downside of this is when you hide a column, the last column expands to fill the new whitespace.
Option 2
Add a new header row to your table. Insert a rectangle into the furthest right column, and insert your logo on to this, as shown.
Notice how the logo moves with the columns
(4 columns visible)
(3 columns visible)
The downside of this however is that your final column must be the width of the logo, and must never be hidden, otherwise the logo will disappear.
Summary
These are the only workarounds I can think of. Hopefully one is suitable for you. As mentioned at the top SSRS really doesn't like dynamic layouting of objects!
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.