1.11M Members

Fixed table headers problem ..

 
0
 

hello ppl .. :o
I am trying to make the other table stop acting funny since the day before yesterday but i failed :confused: ..

The thing is that I have two tables with "fixed" headers .. and the content of both tables is scrollable .. the problem is that when i move the scoll bar of the first table, the second table's header scrolls as well.. the headers only, not the content .. why is that happening :( please help me ..

Here is an exact example of my tables .. hope it helps you understand the problem more .. THANKS ..

<html>
<head>
<title>tables</title>
<link rel="stylesheet" href="unsortable-table.css" type="text/css">


<div id="tbl-container">
<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>

<tbody>


  <tr>
    <td>Student02</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>90</td>
    <td>88</td>
    <td>100</td>
    <td>90</td>

  </tr>
 
  <tr>
    <td>Student06</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>100</td>
    <td>99</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student07</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>85</td>
    <td>68</td>
    <td>90</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student08</td>
    <td>Languages</td>
    <td>male</td>
    <td>100</td>
    <td>90</td>
    <td>90</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student09</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>80</td>
    <td>50</td>
    <td>65</td>
    <td>75</td>

  </tr>
  <tr>
    <td>Student10</td>
    <td>Languages</td>
    <td>male</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student11</td>
    <td>Languages</td>
    <td>male</td>
    <td>86</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student12</td>
    <td>Mathematics</td>
    <td>female</td>
    <td>100</td>
    <td>75</td>
    <td>70</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student13</td>
    <td>Languages</td>
    <td>female</td>
    <td>100</td>
    <td>80</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student14</td>
    <td>Languages</td>
    <td>female</td>
    <td>50</td>
    <td>45</td>
    <td>55</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student15</td>
    <td>Languages</td>
    <td>male</td>
    <td>95</td>
    <td>35</td>
    <td>100</td>
    <td>90</td>

  </tr>

  <tr>
    <td>Student17</td>
    <td>Languages</td>
    <td>female</td>
    <td>80</td>
    <td>100</td>
    <td>55</td>
    <td>65</td>

  </tr>
  <tr>
    <td>Student18</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>30</td>
    <td>49</td>
    <td>55</td>
    <td>75</td>

  </tr>
  <tr>
    <td>Student19</td>
    <td>Languages</td>
    <td>male</td>
    <td>68</td>
    <td>90</td>
    <td>88</td>
    <td>70</td>

  </tr>
  <tr>
    <td>Student20</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>40</td>
    <td>45</td>
    <td>40</td>
    <td>80</td>

  </tr>
  <tr>
    <td>Student21</td>
    <td>Languages</td>
    <td>male</td>
    <td>50</td>
    <td>45</td>
    <td>100</td>
    <td>100</td>

  </tr>

  </tbody>
</table>
</div>

<p> </p>


<div id="tbl-container">
<table id="tbl1">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>

<tbody>


  <tr>
    <td>Student02</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>90</td>
    <td>88</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student03</td>
    <td>Languages</td>
    <td>female</td>
    <td>85</td>
    <td>95</td>
    <td>80</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student04</td>
    <td>Languages</td>
    <td>male</td>
    <td>60</td>
    <td>55</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student05</td>
    <td>Languages</td>
    <td>female</td>
    <td>68</td>
    <td>80</td>
    <td>95</td>
    <td>80</td>

  </tr>

  <tr>
    <td>Student07</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>85</td>
    <td>68</td>
    <td>90</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student08</td>
    <td>Languages</td>
    <td>male</td>
    <td>100</td>
    <td>90</td>
    <td>90</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student09</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>80</td>
    <td>50</td>
    <td>65</td>
    <td>75</td>

  </tr>
 
  <tr>
    <td>Student12</td>
    <td>Mathematics</td>
    <td>female</td>
    <td>100</td>
    <td>75</td>
    <td>70</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student13</td>
    <td>Languages</td>
    <td>female</td>
    <td>100</td>
    <td>80</td>
    <td>100</td>
    <td>90</td>

  </tr>

  <tr>
    <td>Student15</td>
    <td>Languages</td>
    <td>male</td>
    <td>95</td>
    <td>35</td>
    <td>100</td>
    <td>90</td>

  </tr>
 </tbody>
</table>

</div>
</body>
</html>

CSS .. :-|

div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked	{
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default; 
}
	
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}


td.locked,  th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}


body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
text-align: right;
}
 
0
 

and yea .. the headers of the second table are not fixed :\

 
0
 

hehe :o .. looks like I am talking to myself .. so embarresing :-| .. anyway i did something HIGHLY stupid BUT the problem is GOOOOONE :cool: ..

TC DaniWeb ppl ..


;) back to work ..

 
0
 

Could you please let us know, with what modification, your problem was resolved, we are facing the same problem,

Thanks

 
0
 

Hi,

I have created fixed header, fixed footer, fixed right and left column table. Fixed header and footer works fine in all browsers(tested in IE, FF and Chrome). Fixed columns seems to have problem in non IE browser.

http://s7u.blogspot.com

Please let me know if you have any suggestions.

Regards,
Shahib

 
0
 

Is there a reason you guys are using tables for page layouts? Divs are SO much more flexible and easier.
Tables are now meant for displaying tabular/dynamic data, not for page layouts and designs.

Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article