1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:46 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Fixing table header

with fixed left column already

         

Savage2000

7:08 am on Nov 21, 2010 (gmt 0)

10+ Year Member



Hi! I'm trying to make a quite simple to use table with a fixed header and fixed first column. With CSS used to fix first column, this tactics is not working with the header. Is there any Javascript strategy which can fix the header and catch onscroll event to draw a correct table? 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some Title</title>
<style type="text/css" media="screen"> 

#table_container { 
width : 200px; 
height: 150px;
overflow-x:scroll; 
overflow-y:visible; 
padding-bottom:1px; 
margin-left: 60px; /* to make room for position/removed column */ 
} 

table { 
border-collapse : collapse; 
} 

td, th { 
background-color: #aaaaaa; 
border-right : 1px solid #ffffff; 
color : #ffffff; 
text-align : center; 
width: 60px; 
} 

.locked_left { 
background-color: #88ff88; 
font-weight : bold; 
border-right : 1px solid #f00; 

/* the code below removes the table cells (column) and puts them out to the left of the table */ 
position:absolute; 
left: 0; 
top: auto; 
margin-left: 2px; 
padding-right:4px; 
width: 60px; /* needs width here if not given anywhere else */ 
} 
</style> 

<!--[if lt IE 8]> 
<style type="text/css" media="screen"> 
.locked_left { 
position: relative; /* works better than absolute in IE6 & 7 */ 
} 

#table_container { 
margin-left: 0; /* don't need spacing left margin in IE as the column is not actually removed out of the table */ 
} 
</style> 
<![endif]-->

</head>
<body>
<div id='table_container'>
<table>
<thead>
<tr>
<th class='locked_left'>Number</th>
<th >English</th>
<th >French </th>
<th >German </th>
<th>English</th>
<th >French </th>
<th >German </th>
</tr>
</thead>
<tbody>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td>one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>2</td>
<td >two</td>
<td >deux</td>
<td >zwei</td>
<td>one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>3</td>
<td >three</td>
<td >trois</td>
<td >drei</td>
<td>one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td >four</td>
<td >quattre</td>
<td >vier</td>
<td>one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td >four</td>
<td >quattre</td>
<td >vier</td>
<td>one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td >four</td>
<td >quattre</td>
<td >vier</td>
<td >one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td >four</td>
<td >quattre</td>
<td >vier</td>
<td >one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td >four</td>
<td >quattre</td>
<td >vier</td>
<td >one</td>
<td >un</td>
<td >eins</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

birdbrain

3:47 pm on Nov 21, 2010 (gmt 0)



Hi there Savage2000,

Have a look at this example, it may suit your requirements... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>four tables</title> 
 
<style type="text/css"> 
#container { 
 width:491px; 
 padding:1px; 
 border:1px solid #333; 
 margin:auto; 
 color:#333; 
 } 
#table-one,#table-two, 
#table-three,#table-four { 
 border:1px solid #999; 
 border-collapse:collapse; 
 text-align:center; 
 } 
#table-one{ 
 background-color:#cfc; 
 } 
#table-two { 
 border-bottom:0; 
 margin-top:-1px; 
 background-color:#fcc; 
 } 
#table-one #color { 
 background-color:#fcc; 
 } 
#table-two,#scroller { 
 float:left; 
 background-color:#ccf; 
 } 
#table-one th,#table-two td, 
#table-three td { 
 width:110px; 
 border:1px solid #999; 
 } 
#table-one .sides,#table-two .sides, 
#table-three .sides,#table-four .sides { 
 width:16px; 
 border:0; 
 background-color:#999; 
 } 
#table-two,#table-two td { 
 border-right:0; 
 } 
#table-three { 
 margin-top:-1px; 
 background-color:#fff; 
 } 
#scroller { 
 position:relative; 
 width:359px; 
 height:167px; 
 overflow:auto; 
 background-color:#999; 
 } 
#table-four { 
 clear:both; 
 background-color:#999; 
 } 
#table-four td { 
 width:449px; 
 border:1px solid #999; 
 border-top:0; 
 } 
#table-two #nobrdr { 
 border-bottom:0; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
 
<table id="table-one" summary="table headings"> 
<tr> 
 <th class="sides">&nbsp;</th> 
 <th id="color">Number</th> 
 <th>English</th> 
 <th>French</th> 
 <th>German</th> 
 <th class="sides">&nbsp;</th> 
</tr> 
</table> 
 
<table id="table-two" summary="list of numbers"> 
<tbody><tr> 
 <td class="sides">&nbsp;</td><td>1</td></tr><tr> 
 <td class="sides">&nbsp;</td><td>2</td></tr><tr> 
 <td class="sides">&nbsp;</td><td>3</td></tr><tr> 
 <td class="sides">&nbsp;</td><td>4</td></tr><tr> 
 <td class="sides">&nbsp;</td><td>5</td></tr><tr> 
 <td class="sides">&nbsp;</td><td>6</td></tr><tr> 
 <td class="sides">&nbsp;</td><td>7</td></tr><tr> 
 <td class="sides">&nbsp;</td><td id="nobrdr">8</td> 
</tr></tbody> 
</table> 
 
<div id="scroller"> 
<table id="table-three" summary="the translations of the list"> 
<tbody><tr> 
 <td>one</td><td>un</td><td>eins</td></tr><tr> 
 <td>two</td><td>deux</td><td>zwei</td></tr><tr> 
 <td>three</td><td>trois</td><td>drei</td></tr><tr> 
 <td>four</td><td>quattre</td><td>vier</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr> 
 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> 
</tr></tbody> 
</table> 
</div><!-- end #scroller --> 
 
<table id="table-four" summary="bottom blanks"> 
<tbody><tr> 
 <td class="sides">&nbsp;</td><td>&nbsp;</td><td class="sides">&nbsp;</td> 
</tr></tbody> 
</table> 
 
</div><!-- end #container --> 
 
</body> 
</html>

birdbrain

Savage2000

6:54 am on Nov 22, 2010 (gmt 0)

10+ Year Member



Hi! Thanks a million for your reply, Birdbrain! This is a good example of table with fixed header indeed.
Unfortunately it has one little disadvantage - we need to put 3 tables in the HTML code, and thus, once columns widths of one table begin to grow, in the other table they stay as they are. I've tried to put some JS code to adjust widths (cell.style.width) and this wouldn't helped. By the way, I've tried this solution - it also has "widths issue": 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head>
 <title>Some Title</title>
 <style> 
 <!-- 
 table {
 border-collapse : collapse;
 table-layout : fixed;
 } 
 td {
 width   : 200px;
 } 
 th {
 width   : 200px;
 } 
 -->
 </style> 
<script type="text/javascript"> 
window.onload=function(){
 var i;
 var colCount = document.getElementById("firstTr").children.length;
 document.getElementById("movingHead").style.width = document.getElementById("divHeader").clientWidth;
 var mass = document.getElementsByClassName("tableHeader");
 var col = document.getElementById("firstTd");
 col.style.width = document.getElementsByClassName("tableFirstCol")[0].clientWidth;
 for(i=0;i<mass.length;i++)
 {
  mass[i].style.width = document.getElementById("table_div").children[0].children[0].children[0].children[i].clientWidth;
 }
 var rowCount = document.getElementsByClassName("tableFirstCol").length;
 mass = document.getElementsByClassName("tableFirstCol");
 for(i=0;i<mass.length;i++)
 {
  mass[i].style.heigth = document.getElementById("table_div").children[0].children[0].children[i].children[0].clientHeight;
 }
}
 
function fnScroll()
{
 var header = document.getElementById("divHeader");
 var tbl = document.getElementById("table_div");
 header.scrollLeft = tbl.scrollLeft;
 var firstCol = document.getElementById("firstcol");
 firstCol.scrollTop = tbl.scrollTop;
}
</script>
 </head> 
<body>
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="firstTd">
</td>
<td id="movingHead">
<div id="divHeader" style="overflow:hidden;width:284px;">
<table cellspacing="0" cellpadding="0" border="1" > 
<td ><div class="tableHeader">Title1</div></td><td><div class="tableHeader">Title2</div></td><td><div class="tableHeader">Title3</div></td><td><div class="tableHeader">Title4</div></td><td><div class="tableHeader">Title5</div></td><td ><div class="tableHeader">Title6</div></td><td><div class="tableHeader">Title2</div></td><td><div class="tableHeader">Title3</div></td><td><div class="tableHeader">Title4</div></td><td><div class="tableHeader">Title5</div></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="firstcol" style="overflow: hidden;height:80px">
<table width="200px" cellspacing="0" cellpadding="0" border="1" >
<tr>
<td class="tableFirstCol">First Col row1 </td>
</tr>
<tr>
<td class="tableFirstCol">First Col row2</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row3</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row4</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row5</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row6</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row7</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row8</td>
</tr>
<tr>
<td class="tableFirstCol">First Col row9</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div id="table_div" style="overflow: scroll;width:300px;height:100px;position:relative" onscroll="fnScroll()" >
<table width="500px" cellspacing="0" cellpadding="0" border="1" >
<tr id='firstTr'>
<td>Row1Col1</td><td>Row1Col2</td><td>Row1Col3</td><td>Row1Col4</td><td>Row1Col5</td>
</tr>
<tr>
<td>Row2Col1</td><td>Row2Col2</td><td>Row2Col3</td><td>Row2Col4</td><td>Row3Col5</td>
</tr>
<tr>
<td>Row3Col1</td><td>Row3Col2</td><td>Row3Col3</td><td>Row3Col4</td><td>Row3Col5</td>
</tr>
<tr>
<td>Row4Col1</td><td>Row4Col2</td><td>Row4Col3</td><td>Row4Col4</td><td>Row4Col5</td>
</tr>
<tr>
<td>Row5Col1</td><td>Row5Col2</td><td>Row5Col3</td><td>Row5ol4</td><td>Row5Col5</td>
</tr>
<tr>
<td>Row6Col1</td><td>Row6Col2</td><td>Row6Col3</td><td>Row6Col4</td><td>Row6Col5</td>
</tr>
<tr>
<td>Row7Col1</td><td>Row7Col2</td><td>Row7Col3</td><td>Row7Col4</td><td>Row7Col5</td>
</tr>
<tr>
<td>Row8Col1</td><td>Row8Col2</td><td>Row8Col3</td><td>Row8Col4</td><td>Row8Col5</td>
</tr>
<tr>
<td>Row9Col1</td><td>Row9Col2</td><td>Row9Col3</td><td>Row9Col4</td><td>Row9Col5</td>
</tr>
</table>
</div>
</tr>
</table> 
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:46 pm May 13, 2026