Link to home
Start Free TrialLog in
Avatar of mraible
mraible

asked on

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

My question (and demo) is here:

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

Thanks,

Matt
ASKER CERTIFIED SOLUTION
Avatar of avner
avner
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Fendrin
Fendrin
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>
Avatar of Fendrin
Fendrin
ps. tested in Mozilla 1.4 and IE 6
Avatar of Fendrin
Fendrin
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>