I am able to implemented Complete Scrollable Table which uses only CSS. It Works Fine in IE but may not work properly in other browsers.
This table has fixed header, fixed footer, fixed right column and fixed left column remaining Scrollable Body. Which means it is scrollable in 2 dimension.
This table has fixed header, fixed footer, fixed right column and fixed left column remaining Scrollable Body. Which means it is scrollable in 2 dimension.
Advantages:
- Easy to implement.
- Multiple rows can be made non-scrollable.
- Multiple columns can be made non-scrollable
- Also can make table width dynamic.
For people who don't like reading, few points them how to use this code:
Complete Code
- Copy the code present in Textbox into HTML file.
- Modify the below highlighted part if you want to change width or height.
DIV.tableHolder2 {
OVERFLOW: AUTO;
WIDTH: 600px;
POSITION: relative;
HEIGHT: 200px;
}
Complete Code
Now, I will explain what is happening in the code. First lets go to CSS:
DIV.tableHolder2 {
clear: both;
height: 280px;
width: 600px;
overflow: auto;
POSITION: relative;
font-weight: normal;
TEXT-ALIGN: center;
}
The above CSS is applied to DIV. Why it is needed?
The answer is very simple. Here we use scroll property of DIV which will help us creating fixed header and footer also fixing columns.
Why Height and Width is applied to DIV?To make some thing scrollable we need to provide less height or width to it. If we specify less height and width to table, it will not work out. So if we have to make Parent element height or width less than child.
What is Overflow:Auto?
This means Element(Here Div) should get scrollbars when the actual width increases the given width. Here table should be scrollable when it has more height or width. It should not scroll if height or width is less.
Position: Relative
Position DIV relatively to its normal position
thead.scrollHead th, thead.scrollHead td, tfoot.scrollFooter td {
background-color: #1B82E6;
Z-INDEX: 60;
POSITION: relative;
HEIGHT: 20px;
}
Why Z-Index is needed?
The z-index property specifies the stack order of an element. If you don't put z-Index or if you keep less value here, there are more chance of overlapping between adjacent rows when you scroll.
Position: Relative
Generates a relatively positioned element, positioned relative to its normal position
thead.scrollHead td{
thead.scrollHead td{
TOP: expression(this.offsetParent.scrollTop-2);
}
TOP: expression(this.offsetParent.scrollTop-2);
Expression is IE function which calculate the position of DIV and same position is assigned to THEAD.TOP: expression(this.offsetParent.scrollTop-2);
tfoot.scrollFooter td{
TOP:expression(this.offsetParent.clientHeight - this.offsetParent.scrollHeight + this.offsetParent.scrollTop);
}
Here expression TOP for TFOOT.
ie., DIV TOP + DIV HEIGHT - 1 ROW(Scroll Height)
th.fixedLeft, td.fixedLeft {
z-index: 50;
border-right: 1px solid silver;
LEFT: expression(this.offsetParent.scrollLeft-2);
POSITION: relative;
}
The above code is for Left column. It will use expression to calculate LEFT position for Left column.
Similiarly Code for Right column.
th.fixedRight, td.fixedRight {
z-index: 50;
border-left: 1px solid silver;
LEFT:expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft);
POSITION: relative;
POSITION: relative;
}
Now, what all necessary to make scrollable table.
Now, what all necessary to make scrollable table.
DIV
TABLE,
THEAD,
TBODY,
TFOOT
Working Example:
Working Example:
| First Column | Second Column | Third Column | Fourth Column | Fifth Column | Sixth Column | Seventh Column | Eight Column | Ninth Column | Tenth Column |
| 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
| 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 |
| 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 |
| 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 |
| 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 |
| 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 |
| 10 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 10 |
| 11 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 11 |
| 12 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 12 |
| 13 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 13 |
| 14 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 14 |
| 15 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 15 |
| First Column | Second Column | Third Column | Fourth Column | Fifth Column | Sixth Column | Seventh Column | Eight Column | Ninth Column | Tenth Column |
6 comments:
Nice...Works great
Hi, I'm Marco, I would have resizable of columns in your plugin, it's possible?
Thanks
Best regards
Hi Macro,
I guess its possible to have
re-sizable columns.
Actually the columns in scrollable table does not have fixed width, so by default HTML only does re-sizing.
Please let me I have understood your question wrongly.
Regards,
Shahib
The header is not fixed in FireFox, i am using FF3.6
Dude,
Can you check other posts in this blog. Scrollable Table post only works for IE. But others will work in FF and chrome also.
Hey bro,
Thanks for the cool code. Looked all day and finally found your blog. Excellent work!
Cheers,
Matt
Post a Comment