[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 863
  • Last Modified:

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 :)

Regards,
Eben
0
ebenroux
Asked:
ebenroux
1 Solution
 
VirusMinusCommented:
try this ->
<html>
<body onLoad="ta.style.height='100%'">
<div align="center">
  <center>
  <table id="ta" border="2" cellspacing="1" height="100" width="300" >
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  </center>
</div>
</body>
</html>
0
 
seanpowellCommented:
Well, there's always the easy way out here:


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

html, body
{
      height:100%;
}

body
{
      margin:0;
      padding:0;
      background-color:#ffcc66;
}

#div2
{
      overflow: hidden;
      width: 634px;
}

#div3
{
      overflow: auto;
      width: 650px;
}

#hide
{
      width:50px;
      background-color:#ffcc66;
      position:absolute;
      left:634px;
      top:0;
      height:100%;
}

table
{
      border:none;
}

table#heads th
{
      height: 50px;
      width: 110px;
      background-color:#838C93;
      color:#fff;
      padding:0 8px;
      font-size:13px;
}

table#columns td
{
      height: 50px;
      width: 110px;
      background-color:#CFD2D5;
      padding:0 8px;
}

</style>

<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)
{
      removeScrollSynchronization(fromElement);
      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;
}

</script>
</head>
<body>

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

<div id="div2" name="div2">
<table cellspacing="1" id="heads" style="width:1260px; table-layout:fixed;">
      <tr>
            <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>
      </tr>
</table>
</div>

<div id="div3" name="div3">
<table cellspacing="1" id="columns" style="width:1260px; table-layout:fixed;">
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
      <tr>
            <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>
      </tr>
</table>
</div>

</body>
</html>


Sean
0
 
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.

Regards,
Eben

p.s. Thanks also to VirusMinus for the contribution
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now