HTML Scroll table data using Frame Scroll Bars?


I know this has been asked 10K times, but I am looking for a HTML table scroll that uses the frame scrollbar, instead of creating a "table" scroll bar.

I found this, and it works for vertical scrolling, but not horizontal.  Any Ideas on how to get it to do both?  Is there an easier way to do this?

Thanks

bnhcomputing



<html>
<head>
<title>Table Scroll (WebFX)</title>
<style type="text/css">

body {
      border: 0;
      background: buttonface;
      overflow: hidden;
      margin: 0;
}

.scrollTable {
      border-left: 1px solid buttonshadow;
      border-right: 1px solid buttonhighlight;
      border-top: 1px solid buttonshadow;
      border-bottom: 1px solid buttonhighlight;
      background: window;

      width: 100%;
      height: 100%;
      overflow: hidden
}

.scrollTableHead {
      behavior: url("syncscroll.htc");
      background: buttonface;
      width: 100%;
      overflow: hidden;
}

.scrollTableHead table {
      background: buttonface;
      empty-cells: show;
      table-layout: fixed;
}

.scrollTableHead table td {
      border-left: 1px solid buttonhighlight;
      border-right: 1px solid buttonshadow;
      border-top: 1px solid buttonhighlight;
      border-bottom: 1px solid buttonshadow;

}

.scrollTableHead td,
.scrollTableBody td {
      color: windowtext;
      font: icon;
      padding: 2px;
}

.scrollTableBody {
      overflow: auto;
      /* height needs to be calculated from scrollTable */
      width: 100%;
}


</style>
<script type="text/javascript">

function initScrollTable(oElement) {
      resizeScrollTable(oElement);
      oElement.firstChild.syncTo = oElement.lastChild.uniqueID;
      oElement.firstChild.syncDirection = "horizontal";
      oElement.attachEvent("onresize", function () {
            resizeScrollTable(oElement);
      });
}

function resizeScrollTable(oElement) {
      var head = oElement.firstChild;
      var headTable = head.firstChild;
      var body = oElement.lastChild;
      var bodyTable = body.firstChild;
      
      body.style.height = Math.max(0, oElement.clientHeight - head.offsetHeight);
      
      var scrollBarWidth = body.offsetWidth - body.clientWidth;
      
      // set width of the table in the head
      headTable.style.width = Math.max(0, Math.max(bodyTable.offsetWidth + scrollBarWidth, oElement.clientWidth));

      // go through each cell in the head and resize
      var headCells = headTable.rows[0].cells;
      var bodyCells = bodyTable.rows[0].cells;
      
      for (var i = 0; i < bodyCells.length; i++)
            headCells[i].style.width = bodyCells[i].offsetWidth;
}

window.attachEvent("onload", function () {
      var testElement = document.getElementById("testScrollTable")
      initScrollTable(testElement);
});

</script>
</head>

<body>

<div class="scrollTable" id="testScrollTable">
      <span class="scrollTableHead">
            <table cellspacing="0" frame="border">
            <tr>
                  <td><nobr>Header One</nobr></td>
                  <td><nobr>Header Two</nobr></td>
                  <td><nobr>Header Three</nobr></td>
                  <td><nobr>Header Foour</nobr></td>
                  <td><nobr>Header Five</nobr></td>
                  <td></td>
            </tr>
            </table>
      </span>
      <span class="scrollTableBody">
            <table cellspacing="0">

            <script>
                  for (var i = 0; i < 20; i++)
                        document.write("<tr><td nowrap>Some text</td><td nowrap>Something else</td><td nowrap>More</td><td nowrap>less</td><td nowrap>And last but not least</td></tr>");
            </script>
            </table>
      </span>
</div>

</body>
</html>
bnhcomputingAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

EricCommented:
could you use an inline frame (iframe)
that'll give you the scroll bars you are looking for.

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
bnhcomputingAuthor Commented:

Yes, I had heard of that but as I am very new to HTML, I have no idea how to even get started.  Is there a simple example available that shows how to do this with an IFrame?
rockymageeCommented:
You can try this:

<style>
.scrollBox{
width: 200px;
height: 75px;
overflow: auto;
padding: 5px;
scrollbar-face-color: gray;
scrollbar-3dlight-color: black;
scrollbar-arrow-color: red;
scrollbar-base-color: blue;
scrollbar-darkshadow-color: purple;
scrollbar-face-color: yellow;
scrollbar-highlight-color: green;
scrollbar-shadow-color: orange
</style>

<div class="scrollBox">
      start of content
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      <br><br><br><br><br><br>
      end of content
 </div>
_______________________________________________

If you want to use an iframe you simply create a seperate page with
all the data you would like to put into the scroll box and on the page with the
scroll box use the following syntax to call your page you created:

<iframe src="Your_Scrollable_Page.htm" title="Your Title">
<!-- Alternate content for non-supporting browsers -->
<H2>NO IFRAME SUPPORT</H2>
</iframe>

C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

bnhcomputingAuthor Commented:
The scrollbox style appears to create its own scroll bar.  This is what I need to avoid.  I need to use the frame scroll bars only.

as to an iFrame, how do I get the headers and the data to scroll together?  Header should scroll left and right only, the table needs to scroll left and right & up and down and left to right scrolling needs the header synchronized with the table.

I'm still searching, but nothing yet...
bnhcomputingAuthor Commented:

Additional Information:

The code I posted(found) works fine if it is in its own window.  The Horizantal scrolling only fails when I put it in a frame.
bnhcomputingAuthor Commented:

I found the problem, so I will award points to those that answered.

Thanks
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 Development

From novice to tech pro — start learning today.