HTML Scroll table data using Frame Scroll Bars?

Posted on 2006-05-10
Last Modified: 2012-05-05

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?



<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("");
      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%;

<script type="text/javascript">

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

function resizeScrollTable(oElement) {
      var head = oElement.firstChild;
      var headTable = head.firstChild;
      var body = oElement.lastChild;
      var bodyTable = body.firstChild;
    = Math.max(0, oElement.clientHeight - head.offsetHeight);
      var scrollBarWidth = body.offsetWidth - body.clientWidth;
      // set width of the table in the head = 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")



<div class="scrollTable" id="testScrollTable">
      <span class="scrollTableHead">
            <table cellspacing="0" frame="border">
                  <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>
      <span class="scrollTableBody">
            <table cellspacing="0">

                  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>");

Question by:bnhcomputing
    LVL 6

    Accepted Solution

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

    Author Comment


    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?
    LVL 6

    Assisted Solution

    You can try this:

    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

    <div class="scrollBox">
          start of content
          end of content

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


    Author Comment

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

    Author Comment


    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.

    Author Comment


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


    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    This video teaches users how to migrate an existing Wordpress website to a new domain.

    755 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

    17 Experts available now in Live!

    Get 1:1 Help Now