I have a page with:
1 - header.
2 - table.
3 - footer.
The table has a first row which is like a title for each column. After that, all the data gets ordered by row and column.
I need to scroll all the rows except the first one in the top. I try and try and I got a headache.
This is the start position: Demo
And this is One of my attempts: Demo1
I can think a few solutions..
One would be using two tables, pulling the headers out and placing the lower part of the table in a div that you can scroll.
Second could be using waypoints (http://imakewebthings.com/jquery-waypoints/)to lock the table header in and target it with tr:first-child
A third could be using an image as the header and scrolling the content in it's own div tag.
(using position:fixed will keep something locked on a page in position)
Hope these help :)
Related
I followed this tutorial:
http://www.terminally-incoherent.com/blog/2009/10/12/repeating-html-table-headers-on-each-printed-page/
So I have a table with x number of rows and it has a thead and tbody section.
When I print preview it repeats the headings correctly. But for some reason it introduces a spurious row at the top of the next page:
Bottom of page 1:
Top of page 2:
When I look closely it has actually split that last row. Some of it is on one page and the tick is on the other. How do I prevent this?
My web content is being displayed in a CHtmlView control so needs to be IE7 compatible.
This improves it:
avoid page break inside row of table
But I still get am empty row at the bottom on page 2 now. But overall it is an improvement.
Fiddle
https://jsfiddle.net/xs8074th/
I have 1 table and according to the database(group header), the table multiplies itself, usually it is only 1 and sometimes 2, 2 tables fit in 1 page but now I have a rare situation; 4 tables. After the headline all blank, next page 3 tables, following page 1 table. I would like to leave some space after each table so they don't have to be sticked to each other and can be separated like : Headline + 2 tables and then next page 2 tables. I inserted a group footer, this inserted a new line between the tables but still not enough, I need maybe like 3-4 lines to accomplish this. Any tips are welcome.
Table rows have margins. You can increase, for instance, a bottom margin of the header row or the top margin of the first details row.
To the question, why there three tables were shifted to the next page, though there was some free space on the first page. Check "Page Break" properties of your tables, groups and rows. Especially "Page Break / Inside = Avoid" will make complete row or table being shifted to the next page if the current page doesn't have enough space for the entire content of the row or table.
Ive got an RS report set up and i have 2 separate tables, one is a 10 column table with 6 of the columns hidden until expanded on. I also have a table next to this one, however this table sits at the far end of the first table as if it was all expanded. What i want to do is have it so that the 2nd table sits on the end of the first table and moves when the fields are expanded or collapsed! Hope that makes sense!
Managed to get it to do exactly what I needed, took a bit of trial and error but it was actually the chart that sat below the two tables that was affecting the position of the second table. I put the two table inside a rectangle sitting side by side and it worked perfectly!
Try to show top #number rows and not hide unnecessary ones. and by expanding change #number.
You cannot achieve what you want. Moving elements like that would require SSRS to sometimes move your table on the next page when it goes too far on the right.
I have a requirement to display some data to a user.
The data is displayed as "Label: InputForLabel" and will have two columns. It looks like this:
I started by just using a table with four columns for every row. Each column has a width of 25% and the table has a width of 100% -- so this gives the display we see above.
.ContentTable {
width: 100%;
}
.ContentTable tr {
height: 18px;
}
.ContentTable tr td{
width: 25%;
}
Now, I have an additional requirement to be able to dynamically remove a given item and its label. If I just hide the item/label - a gap would be left in the table. I'm hoping to always have 2 item/labels displayed per row and have everything just sort of collapse upwards as item/labels are hidden.
Does this sound like something divs would be able to do more easily? Or is there a way to tell a table object "Always have this many columns for each row. If a column is hidden, pull up the first column from the next row and slide everything forward"?
There is no point in having one big table, so even if you stay with a markup made of tables, you should split it into two columns (which will makes your problem about showing/hiding some rows of one of the column disappear :o).
Then, we could ask the question weither or not the table layout is suited when you have split the content into two columns : I think MasterAM is right and you should give it a try using ul for this kind of layout (and hiding just an element of a list is still as easy as it is with a row in a table)
I need to create three divs, next to each other (attribute float:left).
Then I read the data from database and I need to present this data in three divs, in such a way that I first fill up the first div, line by line and when I reach certain height, I go to the next div and fill it with data, and so on.
This is something like reverse table, that is I first fill the first column in first row then go to second and so on until the end of the row, then I move to the second column of first row
and so on. I hope you get the picture.
Is there a way to achieve this in CSS or in some other way?
This functionality is available in CSS3 using column-count and column-span.
I do not know how to make it efficient, but it should be possible with javascript... you know the line-height, you check the height of first div with all content, then you truncate it to desired size and the rest put to the next div.. repeat.. but this looks odd.. ?
You might be able to do this by requesting the first 30 results in the database in one column, then request the next 30 in the next div, and so on. I can't see it being possible in CSS 2.1 alone.