Solved

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

Posted on 2009-05-19
6
671 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

628 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