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 |
