We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

how to add horizontal scrollbar using css

Doug217
Doug217 asked
on
Medium Priority
10,940 Views
Last Modified: 2008-03-04
Hi
I need to add a horizontal scrollbar to my table as I could have hundred of images in my table.
I am using a simple table and I have put the scroll attributes for the table in the css. But my horizontal scrollbar stays greyed out even the width of all my images are bigger than the specified table width. I do not seem to activate it. Could somebody help please? Here is my code:

.table_photo{  
   width:100%;
   background-color:#000000;
   height:100px;
   text-align:center;
   float:left;
    overflow-x:scroll;
    overflow-y:hidden;
    }

<table class="table_photo">
<tr><td>
<img src="images/win7_thumb.gif"
         onclick='document.getElementById("big").style.backgroundImage = "url(images/win7_200.gif)"' />
<img src="images/win9_thumb.gif"
         onclick='document.getElementById("big").style.backgroundImage = "url(images/win9_200.gif)"' />
<img src="images/win10_thumb.gif"
         onclick='document.getElementById("big").style.backgroundImage = "url(images/win10_200.gif)"' />
             <img src="images/win7_thumb.gif"
         onclick='document.getElementById("big").style.backgroundImage = "url(images/win7_200.gif)"' />
<img src="images/win9_thumb.gif"
         onclick='document.getElementById("big").style.backgroundImage = "url(images/win9_200.gif)"' />
<img src="images/win10_thumb.gif"
         onclick='document.getElementById("big").style.backgroundImage = "url(images/win10_200.gif)"' />
</td>
</tr>
</table>
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2006
Commented:
You could have container div with a fixed width,overflow:auto and white-space:nowrap

<tr><td>
<div style="width:100%;overflow:auto;white-space:nowrap">
[[images]]
</div>
</td>
</tr>

For some reason the same styles don't work well when applied to the <td>, so therefor I added the <div>

-r-

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
This works great. Many Thanks.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.