Aug 21, 2010

Fixed Header Footer Table

I am working on Fixed Header Footer table functionality almost from past 2 years. First version you can find in the same blog. That was my first post.

Now after two years, I am able to find something which works fine in Firefox as well as Chrome. Most difficult part was making the table scrollable in Chrome, FF and IE. (Only one dimensional scroll works in Firefox and Chrome, that means only fixed header and fixed footer not fix columns)

Now how to make Scrollable table in Chrome.
  • Copy this code and modify it to suite your requirements.
  • What ever highlighted in bold are important ones. Specify height and width for DIV.
  • Height for tbody should be less than Div width(Div width -100px)


I guess you want to know what is difference between present code which works fine in Chrome and Firefox and past code which only works fine in IE.

Here I have used HTML tags which changes the style sheet according to browser. The below code works only when browser is other than IE.
These CSS are regarded as CSS hacks, but they are still safe to to use. You can check this website http://www.webdevout.net/css-hacks for more information.


html>body div.tableHolder {
overflow: hidden;
}
html>body tbody.scrollBody {
height: 200px;
overflow: auto;
}

The code for IE is same. But for Firefox and Chrome what I am doing is; I am making TBODY scrollable by setting Overflow:auto


But if we make TBODY scrollable, there is one problem with the last column. It will have different width. And  it will behave differently when used in FF and Chrome. So I have added extra cell for header and footer by using the below code.


<!--[if !IE]><!-->
<td widtd="16px" style="background-color:#ffffff; visibility: hidden"> </td>
<!--<![endif]-->
If the browser is not IE then it will add a extra cell to header. and Similar code is kept in footer to do the same thing.

I don't have much knowledge on browser, but few things were not working fine in Chrome. So kept Javascript which will detect Chrome browser and change the properties accordingly.

<script>
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1;
if(isChrome){
document.getElementById('scrollHead').style.display ="block";
document.getElementById('scrollBody').style.display ="block";
document.getElementById('scrollFooter').style.display ="block";
document.getElementById('tableHolder2').style.width ="580px";
}
</script>

Rest of the code is explained in the my previous post.
first-column second second second second second second second second Last-column  
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column
first-column second second second second second second second second Last-column  
Posted by at No comments:

Jul 28, 2008

Scrollable table

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.  


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:
  • 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{
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.
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;
}


Now, what all necessary to make scrollable table.
DIV
TABLE, 
THEAD, 
TBODY, 
TFOOT




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
Posted by at 6 comments:
Subscribe to: Posts (Atom)

Search