Solved

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

Posted on 2009-05-19
6
667 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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 AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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