Solved

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

Posted on 2009-05-19
6
665 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

743 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

11 Experts available now in Live!

Get 1:1 Help Now