Scroll TABLE horizontally but grow vertically

Hi there experts,

I need to display a TABLE in IE6 that contains quite a bit of data per record (TR) so it ends up being quite wide.

I would like the TABLE to scroll horizontally (so only a horizontal scrollbar) and grow vertically infinitely within the specified width.

I just don't seem to find the answer.  A DIV tag has a height also which ends up having a vertical scrollbar once the TR elements reach this limit.  I never, ever, want the vertical scrollbar, ONLY horizontal.

Any ideas would be greatly appreciated and the solution handsomely rewarded :)

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

try this ->
<body onLoad="'100%'">
<div align="center">
  <table id="ta" border="2" cellspacing="1" height="100" width="300" >
Well, there's always the easy way out here:

<title>Scrolling Tables</title>
<style type="text/css">

html, body


      overflow: hidden;
      width: 634px;

      overflow: auto;
      width: 650px;



table#heads th
      height: 50px;
      width: 110px;
      padding:0 8px;

table#columns td
      height: 50px;
      width: 110px;
      padding:0 8px;


<script type="text/javascript">

window.onload = function ()
      addScrollSynchronization(document.getElementById("div2"), document.getElementById("div3"), "horizontal");

function getOnScrollFunction(oElement)
      return function ()
      if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
      oElement.scrollLeft = event.srcElement.scrollLeft;

function addScrollSynchronization(fromElement, toElement, direction)
      fromElement._syncScroll = getOnScrollFunction(fromElement);
      fromElement._scrollSyncDirection = direction;
      fromElement._syncTo = toElement;
      toElement.attachEvent("onscroll", fromElement._syncScroll);

function removeScrollSynchronization(fromElement)
      if (fromElement._syncTo != null)
      fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
      fromElement._syncTo = null;
      fromElement._syncScroll = null;
      fromElement._scrollSyncDirection = null;


<div id="hide"></div>

<div id="div2" name="div2">
<table cellspacing="1" id="heads" style="width:1260px; table-layout:fixed;">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Col 7</th>
            <th>Col 8</th>
            <th>Col 9</th>
            <th>Col 10</th>

<div id="div3" name="div3">
<table cellspacing="1" id="columns" style="width:1260px; table-layout:fixed;">
            <td>Row 1 Col 1</td>
            <td>Row 1 Col 2</td>
            <td>Row 1 Col 3</td>
            <td>Row 1 Col 4</td>
            <td>Row 1 Col 5</td>
            <td>Row 1 Col 6</td>
            <td>Row 1 Col 7</td>
            <td>Row 1 Col 8</td>
            <td>Row 1 Col 9</td>
            <td>Row 1 Col 10</td>
            <td>Row 2 Col 1</td>
            <td>Row 2 Col 2</td>
            <td>Row 2 Col 3</td>
            <td>Row 2 Col 4</td>
            <td>Row 2 Col 5</td>
            <td>Row 2 Col 6</td>
            <td>Row 2 Col 7</td>
            <td>Row 2 Col 8</td>
            <td>Row 2 Col 9</td>
            <td>Row 2 Col 10</td>
            <td>Row 3 Col 1</td>
            <td>Row 3 Col 2</td>
            <td>Row 3 Col 3</td>
            <td>Row 3 Col 4</td>
            <td>Row 3 Col 5</td>
            <td>Row 3 Col 6</td>
            <td>Row 3 Col 7</td>
            <td>Row 3 Col 8</td>
            <td>Row 3 Col 9</td>
            <td>Row 3 Col 10</td>
            <td>Row 4 Col 1</td>
            <td>Row 4 Col 2</td>
            <td>Row 4 Col 3</td>
            <td>Row 4 Col 4</td>
            <td>Row 4 Col 5</td>
            <td>Row 4 Col 6</td>
            <td>Row 4 Col 7</td>
            <td>Row 4 Col 8</td>
            <td>Row 4 Col 9</td>
            <td>Row 4 Col 10</td>
            <td>Row 5 Col 1</td>
            <td>Row 5 Col 2</td>
            <td>Row 5 Col 3</td>
            <td>Row 5 Col 4</td>
            <td>Row 5 Col 5</td>
            <td>Row 5 Col 6</td>
            <td>Row 5 Col 7</td>
            <td>Row 5 Col 8</td>
            <td>Row 5 Col 9</td>
            <td>Row 5 Col 10</td>
            <td>Row 6 Col 1</td>
            <td>Row 6 Col 2</td>
            <td>Row 6 Col 3</td>
            <td>Row 6 Col 4</td>
            <td>Row 6 Col 5</td>
            <td>Row 6 Col 6</td>
            <td>Row 6 Col 7</td>
            <td>Row 6 Col 8</td>
            <td>Row 6 Col 9</td>
            <td>Row 6 Col 10</td>
            <td>Row 7 Col 1</td>
            <td>Row 7 Col 2</td>
            <td>Row 7 Col 3</td>
            <td>Row 7 Col 4</td>
            <td>Row 7 Col 5</td>
            <td>Row 7 Col 6</td>
            <td>Row 7 Col 7</td>
            <td>Row 7 Col 8</td>
            <td>Row 7 Col 9</td>
            <td>Row 7 Col 10</td>
            <td>Row 8 Col 1</td>
            <td>Row 8 Col 2</td>
            <td>Row 8 Col 3</td>
            <td>Row 8 Col 4</td>
            <td>Row 8 Col 5</td>
            <td>Row 8 Col 6</td>
            <td>Row 8 Col 7</td>
            <td>Row 8 Col 8</td>
            <td>Row 8 Col 9</td>
            <td>Row 8 Col 10</td>
            <td>Row 9 Col 1</td>
            <td>Row 9 Col 2</td>
            <td>Row 9 Col 3</td>
            <td>Row 9 Col 4</td>
            <td>Row 9 Col 5</td>
            <td>Row 9 Col 6</td>
            <td>Row 9 Col 7</td>
            <td>Row 9 Col 8</td>
            <td>Row 9 Col 9</td>
            <td>Row 9 Col 10</td>
            <td>Row 10 Col 1</td>
            <td>Row 10 Col 2</td>
            <td>Row 10 Col 3</td>
            <td>Row 10 Col 4</td>
            <td>Row 10 Col 5</td>
            <td>Row 10 Col 6</td>
            <td>Row 10 Col 7</td>
            <td>Row 10 Col 8</td>
            <td>Row 10 Col 9</td>
            <td>Row 10 Col 10</td>



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ebenrouxAuthor Commented:
Thanks Sean,

Although not 100% what I was after, it helped me to find the error of my ways and fix my mess.  Turns out the TABLE I had in my DIV tag had positioning set to absolute and that buggered things up slightly.


p.s. Thanks also to VirusMinus for the contribution
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.