Solved

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

Posted on 2009-05-19
6
666 Views
Last Modified: 2012-05-07
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
Comment
Question by:BeckyBair
  • 4
  • 2
6 Comments
 
LVL 5

Expert Comment

by:bored321
ID: 24423211
overflow: auto;

this will add it to both bottom and side.

overflow-x only adds side scroll.
0
 
LVL 5

Expert Comment

by:bored321
ID: 24423253
info on css3 selectors (overflow-x/overflow-y) can be found  at http://www.css3.com/
0
 
LVL 5

Expert Comment

by:bored321
ID: 24423415
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:BeckyBair
ID: 24423852
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
 
LVL 5

Accepted Solution

by:
bored321 earned 250 total points
ID: 24424178
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
 

Author Closing Comment

by:BeckyBair
ID: 31583049
That is it!!!  Thank you soooo much!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

930 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

14 Experts available now in Live!

Get 1:1 Help Now