Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2009-05-19
6
Medium Priority
?
673 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 1000 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

877 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