Scroll TABLE horizontally but grow vertically

Posted on 2004-11-06
Last Modified: 2007-12-19
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 :)

Question by:ebenroux
    LVL 30

    Expert Comment

    try this ->
    <body onLoad="'100%'">
    <div align="center">
      <table id="ta" border="2" cellspacing="1" height="100" width="300" >
    LVL 31

    Accepted Solution

    Well, there's always the easy way out here:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <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>



    Author Comment

    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

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
    I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
    Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
    This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now