How to get the Overflow-x: Auto; to work

I'm trying to create Static Headers in a table.  I found this example on the web (http://www.ridgway.co.za/archive/2005/09/25/statictableheadersanddropdownlists.aspx) but need to also have the scroll bar on the bottom - not just the side.  This, I hope, will allow for the columns to be the correct widths.

I have tried to add:   overflow-x: auto;    to the css/style of .ScrollingArea but then only the scroll bar on the side shows - not the rest of the table.

What am I doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Static Table Headers</TITLE>
<style>
.ScrollingArea
{
overflow-y: auto;
}
 
.StaticHeader
{
position: relative;
top: expression(this.offsetParent.scrollTop-1);
background-color: #999999;
color: #000099;
font-weight: bold;
}
</style>
</HEAD>
 
<BODY>
 
<div style="height:60px; width:1%" class="ScrollingArea">
   <table cellpadding="0" cellspacing="0" width="200px">
   <thead>
      <tr class="StaticHeader">
         <td width="75">Name</td>
         <td width="75">Status</td>
         <td width="150">Date</td>
         <td width="50">Color</td>
         <td width="50">Number</td>
         <td width="50">Test</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>First</td>
         <td>Active</td>
         <td>05/19/2009</td>
         <td>Blue</td>
         <td>56</td>
         <td>A</td>
      </tr>
      <tr>
         <td>Second</td>
         <td>Inactive</td>
         <td>01/29/2009</td>
         <td>Green</td>
         <td>12</td>
         <td>B</td>
      </tr>
      <tr>
         <td>Third</td>
         <td>Active</td>
         <td>05/17/2009</td>
         <td>Orange</td>
         <td>99</td>
         <td>C</td>
      </tr>
      <tr>
         <td>Forth</td>
         <td>Inactive</td>
         <td>02/08/2009</td>
         <td>Red</td>
         <td>45</td>
         <td>D</td>
      </tr>
      <tr>
         <td>Fifth</td>
         <td>Active</td>
         <td>03/05/2009</td>
         <td>Tan</td>
         <td>78</td>
         <td>E</td>
      </tr>
      <tr>
         <td>Sixth</td>
         <td>Inactive</td>
         <td>04/28/2009</td>
         <td>Black</td>
         <td>46</td>
         <td>F</td>
      </tr>
   </tbody>
   </table>
</div>
 
</BODY>
</HTML>

Open in new window

BeckyBairAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
bored321Connect With a Mentor Commented:
Ok i understand what you are after now, set the table to 450px (as shown above), then (see code)

Change
<div style="height:60px; width:1%" class="ScrollingArea">
To
<div style="height:60px; width:200px" class="ScrollingArea">
 
Than use the overflow: auto; instead.

Open in new window

0
 
bored321Commented:
overflow: auto;

this will add it to both bottom and side.

overflow-x only adds side scroll.
0
 
bored321Commented:
info on css3 selectors (overflow-x/overflow-y) can be found  at http://www.css3.com/
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
bored321Commented:
Wait, adding a scroll bar to the bottom will not make the columns be the correct widths.

To do that you just need to change the width for the table.
Change:
 
<table cellpadding="0" cellspacing="0" width="200px">
 
To
 
<table cellpadding="0" cellspacing="0" width="450px">

Open in new window

0
 
BeckyBairAuthor Commented:
bored321 -

I tried to add just the    overflow: auto;   and the table disappeared - all that was left was the right scroll bar.  

I am following your link now to check that out.

I am wanting to table to only take up the 200px width and use the scroll bar on the bottom (once I can get it to show up) to move to the right to see the other columns.  I hope that makes sense.
0
 
BeckyBairAuthor Commented:
That is it!!!  Thank you soooo much!
0
All Courses

From novice to tech pro — start learning today.