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;
}

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

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 ..

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

Thanks

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.