Fixed headers in large HTML tables

There are quite a lot of ways to fix the header column and rows in HTML tables. But when tables become larger, most of them are not useful because scrolling gets far too slow. In this article, I will show an applicable way for IE.

Download source files - 2.41 KB

Introduction

There are quite a lot of ways to fix the header column and rows in HTML tables. But when tables become larger, most of them are not useful because scrolling gets far too slow. In the following sample, I will show an applicable way for IE.

My HTML page contains two divs and a table.

...
<div id="outerDiv">
 <div id="innerDiv">
  <table>
   ...
  </table>
 </div>
</div>
...

In my sample, the table looks like this (the red border shows the innerDiv):

Sample screenshot

The main idea is to copy the innerDiv with the table three times so that there is a div each for the header row, the header column, the first cell in the header row, and the body of the table.

In the first three divs, overflow must be set to hidden.
In the body div, overflow can be set to scroll if the body is larger then the available space. Furthermore, the table in the body div needs to be positioned absolutely. Top and Left positions have to be negative (Top = -height of header row, Left = -width of header column) so that the headers are no more visible than the body div.

By copying the whole table, all rows and columns will have equal width and height. If you would only copy the first row of the table to the header div, column width in the header could differ from the body columns. After copying the divs, my outerDiv contains four innerDivs (the red borders show the innerDivs):

Sample screenshot

Finally, the divs have to scroll synchronously. When you scroll to the right, the header row has to move to the right too, and when you scroll to the bottom, the header column needs to move too. I found a nice way to do this here.

Sample screenshot

You can view an online demo here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Karin Huber

Software Developer
software architects

Austria

Member

Hi, my name is Karin Huber. Since 1998 I have been working as a developer and IT consultant focusing on building database oriented web applications. In 2007 my friend Rainer and I decided that we want to build a business based on COTS (component off-the-shelf) software. As a result we founded "software architects".

These days we are offering our first version of the time tracking software called 'time cockpit'. You can find more information at www.timecockpit.com.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Checkboxes in Scrollable Table

kusseal

22:01 3 May '07

Thanks Karin for a great solution. In my scollable table I have checkboxes and when you click on them I have a function that checks the status of the checkbox, i.e. checked or not. The problem that I am experiencing is that, even when a checkbox is checked, it returns false. All my checkboxes have a unique id. I'm not sure how to solve this, I will appreciate any ideas. Thanks, Asha.
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Re: Checkboxes in Scrollable Table

dubbele onzin

9:59 29 Oct '07

Because the javascipt duplicates the contents of the table to the top and left, multiple instances of your form elements will be created. This might result in different results when collecting the form elements when submitted. Gilmore
Sign In·View Thread·Permalink	4.00/5 (3 votes)

Freezing Multiple Columns

sivad1178

14:14 25 Oct '06

Great piece of work here thanks! Does anyone have any ideas on altering this code so that you could freeze multiple left hand side columns? Haven't figured out how to do that using this solution yet. Thanks!
Sign In·View Thread·Permalink	2.60/5 (4 votes)

Re: Freezing Multiple Columns

Hayw1r3

12:47 26 Nov '07

First off I must say "WOW". This is some great code. But have you figured out yet how to modify this to freeze more than 1 column? It would be awesome to have the first 3-4 left columns to freeze as well. I've just spent about 3 weeks banging my head against the CSS wall trying to this and I'm just amazed at the speed. Thanks.
Sign In·View Thread·Permalink	2.40/5 (5 votes)

Re: Freezing Multiple Columns

pete in atlanta

2:24 17 Dec '07

Here's the solution I used- Nest a table in each of the first (fixed) cells with the columns you want. You will need to use fixed width for these columns as the tables don't have any relation. You'll also want to override the top / bottom border styles on these new columns so you don't get a double border.
Sign In·View Thread·Permalink	1.00/5 (2 votes)

Re: Freezing Multiple Columns

David Barraclough

2:52 1 Oct '08

This is what I want to do but I'm not sure how to implement what you suggest.   I have 3 'title cells' to freeze on each row (the ones with class="reportRowHeader").   Here is the HTML section that is working now to freeze 1 cell on each row.   Can you give me an example in this section to freeze the 3 columns?   If you could give an example of how to do that with a dynamic number of columns (ie. all reportRowHeader columns) that completely solve my problem.   Thanks.

      <div id = "outerDiv">
            <div id = "innerDiv">
                  <table class = "reportTable" cellspacing = "0">
                        <tr>
                              <td class = "reportCorner"> </td>
                              <td class = "reportCorner"> </td>
                              <td class = "reportCorner"> </td>
                              <td class = "reportColumnHeader">Albania</td>
                              <td class = "reportColumnHeader">Argentina</td>
                              <td class = "reportColumnHeader">Australia</td>
                              <td class = "reportColumnHeader">Denmark</td>
                              <td class = "reportColumnHeader">Finland</td>
                              <td class = "reportColumnHeader">Iceland</td>
                              <td class = "reportColumnHeader">Norway</td>
                              <td class = "reportColumnHeader">Sweden</td>
                              <td class = "reportColumnHeader">Number</td>
                              <td class = "reportColumnHeader">Percentage (of the whole sample)</td>
                        </tr>
                        <tr>
                              <td class = "reportRowHeader">Q.4 Legal Framework - What is the legal basis for the following?</td>
                              <td class = "reportRowHeader"> </td>
                              <td class = "reportRowHeader"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                        </tr>
                        <tr>
                              <td class = "reportRowHeader"> </td>
                              <td class = "reportRowHeader">4.a   The form and structure of the annual budget and related legislation</td>
                              <td class = "reportRowHeader"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                        </tr>
                        <tr>
                              <td class = "reportRowHeader"> </td>
                              <td class = "reportRowHeader"> </td>
                              <td class = "reportRowHeader">Constitution</td>
                              <td class = "reportDataCell">1</td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell">1</td>
                              <td class = "reportDataCell">1</td>
                              <td class = "reportDataCell">1</td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell"> </td>
                              <td class = "reportDataCell">4</td>
                              <td class = "reportDataCell">50.0%</td>
                        </tr>
                  </table>
            </div>
      </div>

wrapping cell text

thedrums

8:27 16 Oct '06

This solution is excellent! I have been trying to do this for some time. I was wondering about wrapping the text in the table cells, however. Before implementing your solution, my table looked very nice but was far less usable due to the non-fixed headers. Now my table works great but it contains some incredibly wide cells because the text is not wrapping.

I admit I am not a javascript expert by any means. Is there a relatively easy way to fix this and still maintain the fixed headers?

Thanks so much.

Andy

Working In Most Browsers [modified]

Kenneth Bogert

21:02 5 Oct '06

Hello all,

After some work, I have managed to get this script working in all of the major browsers, including IE, Firefox, Opera (buggy though), Konqueror, and Safari.

The only major difference from the original script is the table header MUST be enclosed in a <thead>, and the body must be in a <tbody> tag to work right.

var divContent = null;
var divHeaderRow = null;
var divHeaderColumn = null;
var divHeaderRowColumn = null;
var headerRowFirstColumn = null;
var x;
var y;
var horizontal = false;
var vertical = false;

// Copy table to top and to left
function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
{
     horizontal = scrollHorizontal;
     vertical = scrollVertical;
     divContent = content;

     if(BrowserDetect.browser == "Konqueror") {
          window.onload = CreateScrollHeaderActual;
     } else {
          CreateScrollHeaderActual();
     }
}

function CreateScrollHeaderActual() {
     if (divContent != null)
     {

          var widthCosmeticAdd = 0;
          var heightCosmeticAdd = 0;

          // browser specific cosmetic tweaks
          if (BrowserDetect.browser == "Explorer") {
               widthCosmeticAdd = 2;
               heightCosmeticAdd = 2;
          } else if(BrowserDetect.browser == "Opera" || BrowserDetect.browser == "Konqueror" || BrowserDetect.browser == "Safari") {
               widthCosmeticAdd = 1;
               heightCosmeticAdd = 1;
          }

             var originalTable = findFirstElementByType(divContent, 'table');
          var headerRow = findFirstElementByType(originalTable, 'thead');

          x = originalTable.offsetWidth;
          y = originalTable.offsetHeight;

          divHeaderRow = divContent.cloneNode(true);
          if (horizontal)
          {
               divHeaderRow.style.height = (headerRow.offsetHeight + heightCosmeticAdd) + 'px';
               divHeaderRow.style.overflow = "hidden";

               divContent.parentNode.insertBefore(divHeaderRow, divContent);
               originalTable.style.position = "absolute";
               originalTable.style.top = "-" + (headerRow.offsetHeight + heightCosmeticAdd) + 'px';


               y = y - headerRow.offsetHeight;
          }

          divHeaderRowColumn = divHeaderRow.cloneNode(true);
          headerRowFirstColumn = findFirstElementByType(findFirstElementByType(headerRow,'tr'), 'th');
          divHeaderColumn = divContent.cloneNode(true);
          divContent.style.position = "relative";
          if (vertical)
          {
               divContent.parentNode.insertBefore(divHeaderColumn, divContent);
               divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';

               originalTable.style.position = "absolute";
               originalTable.style.left = "-" + headerRowFirstColumn.offsetWidth + 'px';
          }
          else
          {
               divContent.style.left = "0px";
          }

          if (vertical)
          {
               divHeaderColumn.style.width = (headerRowFirstColumn.offsetWidth + widthCosmeticAdd) + 'px';
               divHeaderColumn.style.overflow = "hidden";
               divHeaderColumn.style.zIndex = "99";

               divHeaderColumn.style.position = "absolute";
               divHeaderColumn.style.left = "0px";
               divHeaderColumn.style.top = (headerRow.offsetHeight + heightCosmeticAdd) + "px";
               addScrollSynchronization(divHeaderColumn, divContent, "vertical");
               x = x - headerRowFirstColumn.offsetWidth;
          }

          if (horizontal)
          {
               if (vertical)
               {
                    divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
               }
               divHeaderRowColumn.style.position = "absolute";
               divHeaderRowColumn.style.left = "0px";
               divHeaderRowColumn.style.top = "0px";
               divHeaderRowColumn.style.width = (headerRowFirstColumn.offsetWidth + widthCosmeticAdd) + 'px';
               divHeaderRowColumn.overflow = "hidden";
               divHeaderRowColumn.style.zIndex = "100";
               divHeaderRowColumn.style.backgroundColor = "#ffffff";

          }

          if (horizontal)
          {
               addScrollSynchronization(divHeaderRow, divContent, "horizontal");
          }

          if (horizontal || vertical)
          {
               window.onresize = ResizeScrollArea;
               ResizeScrollArea();
          }
     }
}

function findFirstElementByType(startNode, search) {
     if (! startNode.hasChildNodes()) return null;

     var children = startNode.childNodes;
     var i;
     for (i = 0; i < children.length; i ++) {
          if (children[i].nodeName.toUpperCase() == search.toUpperCase()) {
               return children[i];
          }
     }
}

// Resize scroll area to window size.
function ResizeScrollArea()
{
     var height = getInnerHeight() - findPosY(divHeaderRow) - 75;

     if (!vertical)
     {
          height -= divHeaderRow.offsetHeight;
     }
     var width = getInnerWidth() - 50;
     if (!horizontal)
     {
          width -= divHeaderColumn.offsetWidth;
     }
     var headerRowsWidth = 0;
//     divContent.childNodes[0].style.width = x + 'px';
//     divContent.childNodes[0].style.height = y + 'px';

     if (divHeaderRowColumn != null)
     {
          headerRowsWidth = divHeaderRowColumn.offsetWidth;
     }

     // width
     if (findFirstElementByType(divContent, 'table').offsetWidth > width)
     {
          divContent.style.width = Math.max(width - headerRowsWidth, 0) + 'px';
          divContent.style.overflowX = "scroll";
          divContent.style.overflowY = "auto";
     }
     else
     {
          divContent.style.width = x + 'px';
          divContent.style.overflowX = "auto";
          divContent.style.overflowY = "auto";
     }

     if (divHeaderRow != null)
     {
          divHeaderRow.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
     }

     // height
     if (findFirstElementByType(divContent, 'table').offsetHeight > height)
     {
          divContent.style.height = Math.max(height, 80) + 'px';
          divContent.style.overflowY = "scroll";
     }
     else
     {
          divContent.style.height = y + 'px';
          divContent.style.overflowY = "hidden";
     }
     if (divHeaderColumn != null)
     {
          divHeaderColumn.style.height = divContent.offsetHeight + 'px';
     }

     // check scrollbars
     if (divContent.style.overflowY == "scroll")
     {
          divContent.style.width = (divContent.offsetWidth + 17) + 'px';
     }
     if (divContent.style.overflowX == "scroll")
     {
          divContent.style.height = (divContent.offsetHeight + 17) + 'px';
     }

     divContent.parentNode.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';
}

// next two functions from quirksmode.org

function getInnerHeight() {
     var y;
     if (self.innerHeight) // all except Explorer
     {
          y = self.innerHeight;
     }
     else if (document.documentElement && document.documentElement.clientHeight)
          // Explorer 6 Strict Mode
     {
          y = document.documentElement.clientHeight;
     }
     else if (document.body) // other Explorers
     {
          y = document.body.clientHeight;
     }
     return y;
}

function getInnerWidth() {
     var x;
     if (self.innerWidth) // all except Explorer
     {
          x = self.innerWidth;
     }
     else if (document.documentElement && document.documentElement.clientWidth)
          // Explorer 6 Strict Mode
     {
          x = document.documentElement.clientWidth;
     }
     else if (document.body) // other Explorers
     {
          x = document.body.clientWidth;
     }
     return x;
}

// ********************************************************************************
// Synchronize div elements when scrolling
// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
// ********************************************************************************
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement, srcElement) {
     return function () {
          if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
               oElement.scrollLeft = srcElement.scrollLeft;
          if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
               oElement.scrollTop = srcElement.scrollTop;
     };

}

// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
     removeScrollSynchronization(fromElement);

     fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);
     fromElement._scrollSyncDirection = direction;
     fromElement._syncTo = toElement;
     if (toElement.addEventListener) {
          toElement.addEventListener("scroll", fromElement._syncScroll, false);
     } else {
          toElement.attachEvent("onscroll", fromElement._syncScroll);
     }
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
     if (fromElement._syncTo != null) {
          if (fromElement._syncTo.removeEventListener) {
               fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);
          } else {
               fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
          }
     }

     fromElement._syncTo = null;
     fromElement._syncScroll = null;
     fromElement._scrollSyncDirection = null;
}

// browser detection routines from quirksmode.org
var BrowserDetect = {
     init: function () {
          this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
          this.version = this.searchVersion(navigator.userAgent)
               || this.searchVersion(navigator.appVersion)
               || "an unknown version";
          this.OS = this.searchString(this.dataOS) || "an unknown OS";
     },
     searchString: function (data) {
          for (var i=0;i<data.length;i++)     {
               var dataString = data[i].string;
               var dataProp = data[i].prop;
               this.versionSearchString = data[i].versionSearch || data[i].identity;
               if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1)
                         return data[i].identity;
               }
               else if (dataProp)
                    return data[i].identity;
          }
     },
     searchVersion: function (dataString) {
          var index = dataString.indexOf(this.versionSearchString);
          if (index == -1) return;
          return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
     },
     dataBrowser: [
          {      string: navigator.userAgent,
               subString: "OmniWeb",
               versionSearch: "OmniWeb/",
               identity: "OmniWeb"
          },
          {
               string: navigator.vendor,
               subString: "Apple",
               identity: "Safari"
          },
          {
               prop: window.opera,
               identity: "Opera"
          },
          {
               string: navigator.vendor,
               subString: "iCab",
               identity: "iCab"
          },
          {
               string: navigator.vendor,
               subString: "KDE",
               identity: "Konqueror"
          },
          {
               string: navigator.userAgent,
               subString: "Firefox",
               identity: "Firefox"
          },
          {
               string: navigator.vendor,
               subString: "Camino",
               identity: "Camino"
          },
          {          // for newer Netscapes (6+)
               string: navigator.userAgent,
               subString: "Netscape",
               identity: "Netscape"
          },
          {
               string: navigator.userAgent,
               subString: "MSIE",
               identity: "Explorer",
               versionSearch: "MSIE"
          },
          {
               string: navigator.userAgent,
               subString: "Gecko",
               identity: "Mozilla",
               versionSearch: "rv"
          },
          {           // for older Netscapes (4-)
               string: navigator.userAgent,
               subString: "Mozilla",
               identity: "Netscape",
               versionSearch: "Mozilla"
          }
     ],
     dataOS : [
          {
               string: navigator.platform,
               subString: "Win",
               identity: "Windows"
          },
          {
               string: navigator.platform,
               subString: "Mac",
               identity: "Mac"
          },
          {
               string: navigator.platform,
               subString: "Linux",
               identity: "Linux"
          }
     ]

};
BrowserDetect.init();

I hope this helps somebody, and thank you Karin for a great idea.

kdb

-- modified at 22:53 Tuesday 10th October, 2006

Re: Working In Most Browsers

Keith Worden

5:55 9 Jul '10

The function findPosY is missing.
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: Working In Most Browsers

hec78

22:13 27 Dec '10

Hi,

Thanks for this good script

I found that from http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21761515.html:

function findPosY(obj) {

  var curTop= obj.offsetTop;

  while((obj= obj.offsetParent) != null) {

    curTop+= obj.offsetTop;

  } // end while

  return curTop;

} // end function

Put it in the script and all work (I tested on Firefox 3.5.16 and IE8)

I hope this will help you

Herve

Working in Firefox + IE

Kenneth BOgert

11:45 11 Aug '06

Hello all, thank you Karin for a wonderful script. I like this one much better than the one posted on your blog because it degrades gracefully if the javascript doesn't work or is disabled.

That said, I have modified your script to work in both firefox and IE. The modified code follows.



var divContent = null;

var divHeaderRow = null;

var divHeaderColumn = null;

var divHeaderRowColumn = null;

var headerRowFirstColumn = null;

var x;

var y;

var horizontal = false;

var vertical = false;

var childElement = 0;

 

// Copy table to top and to left

function CreateScrollHeader(content, scrollHorizontal, scrollVertical)

{

	horizontal = scrollHorizontal;

	vertical = scrollVertical;

	

	if (content != null)

	{

		divContent = content;

 

		if (divContent.childNodes[childElement].tagName == null)

		{

			childElement = 1;

		}

	

		var headerRow = divContent.childNodes[childElement].childNodes[childElement];

		x = divContent.childNodes[childElement].offsetWidth;

		y = divContent.childNodes[childElement].offsetHeight;		

 

		divHeaderRow = divContent.cloneNode(true);		

		if (horizontal)

		{

			divHeaderRow.style.height = headerRow.offsetHeight + 'px';

			divHeaderRow.style.overflow = "hidden";

			

			divContent.parentNode.insertBefore(divHeaderRow, divContent);

			divContent.childNodes[childElement].style.position = "absolute";

			divContent.childNodes[childElement].style.top = "-" + headerRow.offsetHeight + 'px';

			

			y = y - headerRow.offsetHeight;

		}

		

		divHeaderRowColumn = divHeaderRow.cloneNode(true);			

		headerRowFirstColumn = headerRow.childNodes[childElement].childNodes[childElement];

		divHeaderColumn = divContent.cloneNode(true);

		divContent.style.position = "relative";

 

		if (vertical)

		{

			divContent.parentNode.insertBefore(divHeaderColumn, divContent);

			divContent.style.left = headerRowFirstColumn.offsetWidth + 'px';

			

			divContent.childNodes[childElement].style.position = "absolute";

			divContent.childNodes[childElement].style.left = "-" + headerRowFirstColumn.offsetWidth + 'px';

		}

		else

		{

			divContent.style.left = "0px";

		}

 

		if (vertical)

		{

			divHeaderColumn.style.width = headerRowFirstColumn.offsetWidth + 'px';

			divHeaderColumn.style.overflow = "hidden";

			divHeaderColumn.style.zIndex = "99";

			

			divHeaderColumn.style.position = "absolute";

			divHeaderColumn.style.left = "0px";

			addScrollSynchronization(divHeaderColumn, divContent, "vertical");

			x = x - headerRowFirstColumn.offsetWidth;

		}

 

		if (horizontal)

		{

			if (vertical)

			{

				divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);

			}

			divHeaderRowColumn.style.position = "absolute";

			divHeaderRowColumn.style.left = "0px";

			divHeaderRowColumn.style.top = "0px";

			divHeaderRowColumn.style.width = headerRowFirstColumn.offsetWidth + 'px';

			divHeaderRowColumn.overflow = "hidden";

			divHeaderRowColumn.style.zIndex = "100";

			divHeaderRowColumn.style.backgroundColor = "#ffffff";

			

		}

		

		if (horizontal)

		{

			addScrollSynchronization(divHeaderRow, divContent, "horizontal");

		}

		

		if (horizontal || vertical)

		{

			window.onresize = ResizeScrollArea;

			ResizeScrollArea();

		}

	}

}

 



// Resize scroll area to window size.

function ResizeScrollArea()

{

	var height = document.documentElement.clientHeight - 120;

	if (!vertical)

	{

		height -= divHeaderRow.offsetHeight;

	}

	var width = document.documentElement.clientWidth - 50;

	if (!horizontal)

	{

		width -= divHeaderColumn.offsetWidth;

	}

	var headerRowsWidth = 0;

	divContent.childNodes[childElement].style.width = x + 'px';

	divContent.childNodes[childElement].style.height = y + 'px';

 

	if (divHeaderRowColumn != null)

	{

		headerRowsWidth = divHeaderRowColumn.offsetWidth;

	}

 

	// width

	if (divContent.childNodes[childElement].offsetWidth > width)

	{

		divContent.style.width = Math.max(width - headerRowsWidth, 0) + 'px';

		divContent.style.overflowX = "scroll";

		divContent.style.overflowY = "auto";

	}

	else

	{

		divContent.style.width = x + 'px';

		divContent.style.overflowX = "auto";

		divContent.style.overflowY = "auto";

	}

 

	if (divHeaderRow != null)

	{

		divHeaderRow.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';

	}

 

	// height

	if (divContent.childNodes[childElement].offsetHeight > height)

	{

		divContent.style.height = Math.max(height, 80) + 'px';

		divContent.style.overflowY = "scroll";

	}

	else

	{

		divContent.style.height = y + 'px';

		divContent.style.overflowY = "hidden";

	}

	if (divHeaderColumn != null)

	{

		divHeaderColumn.style.height = divContent.offsetHeight + 'px';

	}

 

	// check scrollbars

	if (divContent.style.overflowY == "scroll")

	{

		divContent.style.width = (divContent.offsetWidth + 17) + 'px';

	}

	if (divContent.style.overflowX == "scroll")

	{

		divContent.style.height = (divContent.offsetHeight + 17) + 'px';

	}

 

	divContent.parentNode.style.width = (divContent.offsetWidth + headerRowsWidth) + 'px';

 

}

 



// ********************************************************************************

// Synchronize div elements when scrolling 

// from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html

// ********************************************************************************

// This is a function that returns a function that is used

// in the event listener

function getOnScrollFunction(oElement, srcElement) {

	return function () {

		if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")

			oElement.scrollLeft = srcElement.scrollLeft;

		if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")

			oElement.scrollTop = srcElement.scrollTop;

	};

 

}

 

// This function adds scroll syncronization for the fromElement to the toElement

// this means that the fromElement will be updated when the toElement is scrolled

function addScrollSynchronization(fromElement, toElement, direction) {

	removeScrollSynchronization(fromElement);

	

	fromElement._syncScroll = getOnScrollFunction(fromElement, toElement);

	fromElement._scrollSyncDirection = direction;

	fromElement._syncTo = toElement;

	if (toElement.addEventListener) {

		toElement.addEventListener("scroll", fromElement._syncScroll, false);

	} else {

		toElement.attachEvent("onscroll", fromElement._syncScroll);

	}

}

 

// removes the scroll synchronization for an element

function removeScrollSynchronization(fromElement) {

	if (fromElement._syncTo != null) {

		if (fromElement._syncTo.removeEventListener) {

			fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll, false);

		} else {

			fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);

		}

	}

 

	fromElement._syncTo = null;

	fromElement._syncScroll = null;

	fromElement._scrollSyncDirection = null;

}

This new code expects you to have a thead tag surrounding your top table headers, this allows you to split up more of the table than just the very top row. If you don't want this, you will have to modify lines 27 and 45 to be:



var headerRow = divContent.childNodes[childElement].childNodes[childElement].childNodes[0];

 

headerRowFirstColumn = headerRow.childNodes[childElement];

Enjoy.

kdb

Re: Working in Firefox + IE

chathuraka

19:18 7 Jun '07

Thankx kdb this code works well with both IE & FireFox
Sign In·View Thread·Permalink

Problem when using Ctrl-F to find

THEDI

18:07 8 Aug '06

Hi,

Your article is very good. Thanks god I found yours.
But until now, I had problem with this when using Ctrl-F to find some text on the grid.

The grid strangely behaves, just try it yourself. I'm guess this issue occurs because you duplicate the content table into 2->4, and then when IE try to find a specific text, it find on the original one either on the others copied ones.

Does anyone have the same problem as me?
Hope to receive help from all of you.

Thanks

Display row using javascript

adril1qqww

6:53 25 Jul '06

I need that when each line of the table will be clicked, a new line that this occults either shown, but am not obtaining therefore I occur error of Javascript, what I could make?

below, fragment my code:



<script>

	function view(){

		subitem.style.display='';

	}

</script>

<!--div id="outerDiv"-->

<!--div id="innerDiv"-->



			





onclick="view();">




				
					Table
					Column 1
					Column 2
					Column 3
					Column 4
				
				
					Row 1
					Value 1 
					Value 2
					Value 3
					Value 4
				
				
					Sub Item Row 1 >>
					Value 1 
					Value 2
					Value 3
					Value 4
				
			
		<!--/div-->

	<!--/div-->

Adriano

-- modified at 12:55 Tuesday 25th July, 2006

Copying tables

jasongilley

7:44 4 Jul '06

Why do you copy the entire tables? Why not make a solution where only the header row gets copied for the header and the frozen columns get copied for the left div? And all this could be packaged real nice into a server control. Jason Gilley
Sign In·View Thread·Permalink

Re: Copying tables

Dwight Johnson

2:56 5 Jul '06

Jason, Sounds to me like you have the makings of a CodeProject article. Go for it, dude! Show us how to do what you said. Dwight
Sign In·View Thread·Permalink

Re: Copying tables

Karin Huber

7:20 5 Jul '06

I copy the entire table because then I do not have to care about the width of the columns. Otherwise the content in the header row might be smaller than the content in the body (or the other way round), then I would have to synchronize them. As it is not possible to set the width of a TD I would have to insert a DIV into each TD and set the width of the DIV.

I did something similar in my cross browser solution (http://www.cubido.at/Blog/tabid/176/EntryID/94/Default.aspx[^]) but for large tables synchronizing the columns takes more time than copying the entire table (only in Internet Explorer).

Visit my blog at http://www.cubido.at/karin

Re: Copying tables

jasongilley

8:51 5 Jul '06

I see what your talking about with the maximum column width, but you can set the size of a td also by using a 1 pixel transparent gif that you set a width to instead of a div, and the browser cant size this down on you.
Sign In·View Thread·Permalink

Re: Copying tables

Karin Huber

3:02 6 Jul '06

I decided not to use images because:

1) it would destroy my layout, 1px height is small but it is still visible, so it would be necessary to change the style (padding, margin, ...) for TD's with images to make them look like normal TD's

2) in the first column of the first row 2 images would be necessary to adjust width and height in one cell, 1 image for width and height is not possible because the space is required for the content of the cell, this would cause some more problems with layout

Visit my blog at http://www.cubido.at/karin

Duplicating the entire table

Ashley van Gerven

7:20 27 Jun '06

Nice idea to duplicate the entire table - saves the trouble of writing script to match up the column widths. However with a really large table, won't your implementation use up a lot more memory since it has 4 copies of the large table?
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: Duplicating the entire table

Karin Huber

5:52 29 Jun '06

I tried to build another solution where cell size is adjusted (http://www.cubido.at/Blog/tabid/176/EntryID/94/Default.aspx). The main advantage is that is works in Firefox. But interestingly for really large tables the loading of the page takes much more time than in the first solution (only in IE, in Firefox it works fine).

You can see the difference in the online demos:

Cross browser solution

IE solution

Visit my blog at http://www.cubido.at/karin

Re: Duplicating the entire table

Ashley van Gerven

13:43 29 Jun '06

Congrats - as far as I know you've made the first cross-browser scrolling table that can freeze the left-hand column as well as the header. My cross-browser ScrollingGrid only freezes the header.. I never got around to the column-locking solution. But both our solutions' approach to the problem are very similar (i.e. seperate tables and syncing the scroll position when the content cells are scrolled).

"Nothing ever changes by staying the same." - David Brent (BBC's The Office)

~ ScrollingGrid: A cross-browser 2-way-scrolling freeze-header control for the ASP.NET DataGrid

firefox solution ?

webber123456

6:43 26 Jun '06

any ideas on why this does not work in firefox ?
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: firefox solution ?

Ashley van Gerven

23:48 26 Jun '06

Here is a cross-browser ASP.NET control that also uses synchronized scrolling and is Firefox compatible:
http://www.codeproject.com/aspnet/ScrollingGrid.asp[^]

I'll be updating the article in the next week or so with the new version of the control.

"... This man is obviously a psychotic."
"We-he-ell, uh, I'd like to hold off judgement on a thing like that, sir, until all the facts are in."
(Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb)

~ ScrollingGrid (cross-browser freeze-header control)