Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 676
  • Last Modified:

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

0
BeckyBair
Asked:
BeckyBair
  • 4
  • 2
1 Solution
 
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
 
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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
 
bored321Commented:
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
 
BeckyBairAuthor Commented:
That is it!!!  Thank you soooo much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now