<tbody style="height: 400px; overflow: auto"> doesn't work in IE (works fine in Mozilla)

mraible
mraible used Ask the Experts™
on
My question (and demo) is here:

http://www.raibledesigns.com/page/rd?anchor=display_tag_static_headers

Thanks,

Matt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
It is not yet supported (and will not be supported) in IE.
There are work arounds for it, for instancethis WebFX example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<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 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.onload =  function () {
      var testElement = document.getElementById("testScrollTable")
      initScrollTable(testElement);
};

</script>
</head>

<body>


<div class="scrollTable" id="testScrollTable" style="height:200px;">
      <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 < 30; 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>

Commented:
in essence, you are looking for a text area that allows for html tags. here is a div that scrolls... just add the header bar immediately above it and -boom- you have a 'static' header

<html>
<head>
    <title></title>
    <style>
            .odd {
                  color: #000;
                  background-color: #fff;
                  width: 100%;
            }
            .even {
                  color: #000;
                  background-color: #fcf;
                  width: 100%;
            }
            .area {
                  height: 100px;
                  overflow: scroll;
            }
    </style>
</head>
<body>
    <div class="area">
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
            <div class="even">data</div>
            <div class="odd">data</div>
      </div>
</body>
</html>

Commented:
ps. tested in Mozilla 1.4 and IE 6

Commented:
looking back at my answer, i see that I did a horrible job explaining how my idea solves your issue... here is my previous code, reworked for a table. again, tested in mozilla 1.4 and ie 6.

<html>
<head>
      <title></title>
              <style>
         .odd {
              color: #000;
              background-color: #fff;
              width: 100%;
         }
         .even {
              color: #000;
              background-color: #fcf;
              width: 100%;
         }
         .area {
              height: 100px;
                    width: 520px;
              overflow: scroll;
         }
             table {
                     width: 500px;
             }
             td, th {
                     width: 25%;
             }
   </style>
</head>
<body>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
   </table>
   <div class="area">
               <table>
           <tr class="odd">
              <td>Row 1 Col 1</td>
              <td>Row 1 Col 2</td>
              <td>Row 1 Col 3</td>
              <td>Row 1 Col 4</td>
           </tr>
           <tr class="even">
              <td>Row 2 Col 1</td>
              <td>Row 2 Col 2</td>
              <td>Row 2 Col 3</td>
              <td>Row 2 Col 4</td>
           </tr>
           <tr class="odd">
              <td>Row 3 Col 1</td>
              <td>Row 3 Col 2</td>
              <td>Row 3 Col 3</td>
              <td>Row 4 Col 4</td>
           </tr>
           <tr class="even">
              <td>Row 4 Col 1</td>
              <td>Row 4 Col 2</td>
              <td>Row 4 Col 3</td>
              <td>Row 4 Col 4</td>
           </tr>
           <tr class="odd">
              <td>Row 5 Col 1</td>
              <td>Row 5 Col 2</td>
              <td>Row 5 Col 3</td>
              <td>Row 5 Col 4</td>
           </tr>
           <tr class="even">
              <td>Row 6 Col 1</td>
              <td>Row 6 Col 2</td>
              <td>Row 6 Col 3</td>
              <td>Row 6 Col 4</td>
           </tr>
            </table>
   </div>
</body>
</html>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial