469,277 Members | 1,914 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,277 developers. It's quick & easy.

Problem with floating header of a table

The javascript code is like this....
Expand|Select|Wrap|Line Numbers
  1. function init(){
  2.     var mt = document.getElementById('main-tab');
  3.     var p = getElPosition(mt);
  4.     var h = document.getElementById('header');
  5.     var c_w = [];
  6.     var c_s = h.cells;
  7.     var c_s_l = c_s.length;
  8.     for(var i = 0; i < c_s_l; i++) c_w.push(c_s[i].offsetWidth);
  9.     var h_html = h.innerHTML;
  10.     var h_w = h.offsetWidth;
  11.  
  12.     var div = document.createElement('DIV');
  13.     div.innerHTML = '<table border=0 cellpadding="0" cellspacing="1" width="100%" style="background-color:#cccccc;"><tr>' + h_html + '</tr></table>';
  14.  
  15.     div.style.width = h_w + 'px';
  16.     div.style.position = 'fixed';
  17.     div.style.left = p.left + 'px';
  18.     div.style.top = p.top + 'px';
  19.     //div.style.border = '2px solid gray';
  20.     document.body.appendChild(div);
  21.  
  22.     c_s = div.firstChild.rows[0].cells;
  23.     for(var i = 0; i < c_s_l; i++) c_s[i].style.width = c_w[i] + 'px';
  24. }
  25.  
THe HTML code is like this...

Expand|Select|Wrap|Line Numbers
  1. <body onload="init();">
  2. <table border=0 cellpadding="0" cellspacing="1" id="main-tab" style="background-color:#cccccc;">
  3. <tr id="header">
  4. <th>header1</th>
  5. <th>header2</th>
  6. ....
  7. ....
  8. ....
  9. </tr>
  10. <tr>
  11. <td>data1.........</td>
  12. <td>data2.....................................................</td>
  13. <td>data3.........</td>
  14. .....
  15. .....
  16. .....
  17. </tr>
  18. <tr>
  19.  
Make the HTML file such a way so that vertical scroll appears. Otherwise floating header is meaningless ;)

Though CSS not be required for this, still i am posting the CSS code...

Expand|Select|Wrap|Line Numbers
  1. th{
  2. padding: 1px;
  3. font-family:Geneva, Arial, Helvetica, sans-serif;
  4. font-size:12;
  5. font-weight:600;
  6. font-style:normal;
  7. background-color: #bbccff;
  8. text-align: left;
  9. vertical-align: middle;
  10. }
  11.  
  12. td{
  13. padding: 1px;
  14. font-family:Geneva, Arial, Helvetica, sans-serif;
  15. font-size:10;
  16. font-weight:600;
  17. font-style:normal;
  18. background-color: white;
  19. text-align: left;
  20. vertical-align: middle;
  21. }
  22.  
What i am trying to do is, i am setting a fixed positioned DIV and inside that a table is placed whose headers are supposed to have same width as original table has. But it fails..please help :)
Aug 31 '11 #1
1 1419
Samishii23
246 100+
Are you talking about making something that stays locked in one place on the page no matter how much the user scrolls the screen?

In Chrome just using display: fixed; works. I believe at the least IE would need an JS implementation to work. But I don't know for certain.
Sep 13 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by shruti | last post: by
reply views Thread by Muhammad Ahsin Saleem | last post: by
reply views Thread by abarun22 | last post: by
2 posts views Thread by smartic | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.