1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Fixed first table column

using CSS in IE works great, not in FireFox

         

Savage2000

11:44 am on Nov 18, 2010 (gmt 0)

10+ Year Member



Hi!
I'm trying to make a table with a fixed first column using CSS. I already made this to work in IE but unfirtunately - there is a major problems in FireFox. Can someone please point me in the right direction? 


<!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, th {
 background-color: #aaaaaa;
 border-right : 1px solid #ffffff;
 color   : #ffffff;

 width   : 50px;
 text-align  : center;

 }
 td.locked_left, th.locked_left {
 background-color: #88ff88;
 font-weight  : bold;
left: 0px;
 border-left  : 1px solid #ffffff;
 position  : relative;
z-index: 1;
 }
 #table_container {
  width   : 200px;
  overflow  : scroll;
 }
 -->
 </style>
<script type="text/javascript">
if(document.getElementsByClassName == undefined) { 
 document.getElementsByClassName = function(cl) { 
  var retnode = []; 
  var myclass = new RegExp('\\b'+cl+'\\b'); 
  var elem = this.getElementsByTagName('*'); 
  for (var i = 0; i < elem.length; i++) { 
   var classes = elem[i].className; 
   if (myclass.test(classes)) { 
   retnode.push(elem[i]); 
   } 
  } 
  return retnode; 
 } 
}; 

function tabScroll()
{
 var mass = document.getElementsByClassName("locked_left");
 var el=0;
 for(el=0;el<mass.length;el++)
 {
  mass[el].style.left = document.getElementById('table_container').scrollLeft;
 } 
}
</script>
 </head>
<body>
 <div id='table_container' onscroll="tabScroll()">
 <table>
  <thead>
  <tr>
   <th id="locked_left" 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 id="locked_left" 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 id="locked_left" 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 id="locked_left" 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 id="locked_left" 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 id="locked_left" 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 id="locked_left" 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 id="locked_left" 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 id="locked_left" 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>

SuzyUK

5:04 pm on Nov 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hiya Savage2000 and Welcome to WebmasterWorld!

Good news, bad news and some more good news

Good News: there are some nice jquery scripts out there which will do it for you if you want to use them, just search "HTML table fixed column header" (without quotes)

Bad News: Only IE will do exactly what you want and possibly only IE6 & IE7 at that, as they are taking advantage of something that shouldn't happen! - You can't or shouldn't be able to relatively position a table cell - but whatever it's doing it nicely in this case isn't it :)

Good News: you can achieve something close to what you're after and without a script at that! - by feeding some slightly different CSS to newer browsers

Good News: here's some sample CSS with notes
<style type="text/css" media="screen">

#table_container {
width : 200px;
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]-->


The above feeds the absolute positioning method to all browsers, this code actually takes the first column out of scrollable table, but works like you want it to in this case. You also need to left margin the table a little to make room for the column once it's taken out of the flow

The IE conditional code feeds your code back to version below 8, it only needs to see position: relative (?) instead of absolute, and then doesn't need the left margin

good luck
Suzy

PS: you shouldn't need the javascript you posted with this and you can also remove the ID's off the table cells as you should only have one ID anyway

Savage2000

1:02 pm on Nov 19, 2010 (gmt 0)

10+ Year Member



Thanks a million! I've tried this CSS and it works fine! I have only 1 question left: I've tried to use this CSS with some modifications in order to fix first column and first row(header) of the table simultaneously and found that once row(column) are out from the flow the are not cutted anymore. Is there any solution to make this work with CSS and Javascript(May be it is possible to catch scroll event and move corresponding header(column) to a scroll amount)? 


<html>
<head>
 <title>Some Title</title>
<style type="text/css" media="screen">
#table_container {
width : 100px;
height: 100px;
overflow-x:scroll;
overflow-y:scroll;
padding-bottom:1px;
margin-left: 60px; /* to make room for position/removed column */
margin-top: 32px;
}
table {
border-collapse : collapse;
}
td, th {
background-color: #aaaaaa;
border-right : 1px solid #ffffff;
color : #ffffff;
text-align : center;
width: 60px;
height: 28px;
}
.locked_left {
background-color: #88ff88;
font-weight : bold;
overflow-y:scroll;
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 */
}

.locked_top {
background-color: #88ff88;
font-weight : bold;
border-bottom : 1px solid #f00;
position:absolute;
top: 0;
left: auto;
margin-top: 2px;
padding-bottom:1px;
height: 28px;
}
</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
.locked_left {
position: relative; /* works better than absolute in IE6 & 7 */
}
.locked_top {
position: relative;
}
#table_container {
margin-left: 0; /* don't need spacing left margin in IE as the column is not actually removed out of the table */
margin-bottom: 0;
}
</style>
<![endif]--> 
</head>
<body>
 <div id='table_container'>
 <table>
 <thead>
 <tr class='locked_top'>
 <th>Number</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>
 </tr>
 <tr>
 <td class='locked_left'>2</td>
 <td  >two</td>
 <td  >deux</td>
 <td  >zwei</td>
 </tr>
 <tr>
 <td class='locked_left'>3</td>
 <td  >three</td>
 <td  >trois</td>
 <td  >drei</td>
 </tr>
 <tr>
 <td class='locked_left'>4</td>
 <td  >four</td>
 <td  >quattre</td>
 <td  >vier</td>
 </tr>
 <tr>
 <td class='locked_left'>4</td>
 <td  >four</td>
 <td  >quattre</td>
 <td  >vier</td>
 </tr>
 <tr>
 <td class='locked_left'>4</td>
 <td  >four</td>
 <td  >quattre</td>
 <td  >vier</td>
 </tr>
 </tbody>
 </table>
 </div>
</body>
</html>

SuzyUK

5:49 pm on Nov 19, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I thought you might ask this next ;)

Is there any solution to make this work with CSS and Javascript(May be it is possible to catch scroll event and move corresponding header(column) to a scroll amount)?


I don't personally know of any solution but javascipt or jquery is likely what you will be looking for if you want to fix both header and first column

I had a quick look search for [HTML Table fixed column header] but I didn't really find anything that's cross browser stable though.. maybe someone else knows of one or you could try a post in the Javascript Forum?

sorry!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026