• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 10836
  • Last Modified:

how to add horizontal scrollbar using css

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>
0
Doug217
Asked:
Doug217
1 Solution
 
RoonaanCommented:
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-
0
 
Doug217Author Commented:
This works great. Many Thanks.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now