38 users online (0 members and 38 guests)  


  Results 1 to 7 of 7

Related

  1. Replies: 1
  2. Change table vertical to horizontal    Forum: HTML Forum
    Replies: 1
  3. Horizontal scroll bar fix    Forum: CSS Forum
    Replies: 0
  4. Replies: 6
  5. Vertical Scrollin with no Vertical Scroll Bar    Forum: Website Scripts Forum
    Replies: 1
  1. #1
    XR8TDN9GGA's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    1

    Need horizontal scroll in table (no vertical)

    Hello
    I need a horizontal scroll in a table (no vertical). Help!!!
    Heres my code:


    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>
    <div style="width: 300px; height: 100px; overflow: auto; border: 0; background-color: #FFFFFF;">
    BLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAH
    </div>

    CHeers!!!!

  2. #2
    krak_d's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2004
    Location
    Liverpool
    Posts
    166
    Hi,

    change
    overflow: auto;
    to, overflow-x: scroll; overflow-y: hidden;

    krak_d

  3. #3
    stuboller's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    1

    more help please

    Ok so I've got the following code:

    <div style="width: 500px; height: 80px; overflow-x: auto; overflow-y: hidden;; background-color: #ffffc6">
    <img src="photos/skorea_photos/07440009_thumb.png">
    <img src="photos/skorea_photos/07440017_thumb.png">
    <img src="photos/skorea_photos/07440037_thumb.png">
    /div>
    and the scroll bar still doesn't go horizontally when I add lots of images.

    Is this someting to do with the images or am I missing something?

    Thanks
    in advance

  4. #4
    krak_d's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Mar 2004
    Location
    Liverpool
    Posts
    166
    Hi,
    alter the code in bold to read,

    overflow-x: scroll; overflow-y: hidden;

    Quote Originally Posted by stuboller
    <div style="width: 500px; height: 80px; overflow-x: auto; overflow-y: hidden;; background-color: #ffffc6">
    Also, you will need to align your images or they will stack one on top of the other!


    krak_d
    Last edited by krak_d; 05-26-2004 at 04:23 AM. Reason: forgot to mention img alignment!

  5. #5
    amitmathur's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    1

    Question Still a Problem with Horizontal Scroll

    Hi,

    I also faced the similar problem. I tried the solution you suggested. It works fine with IE, but "overflow-x: scroll; overflow-y: hidden;" are not supported in Mozilla and Opera.

    Is there any way around with this problem.

    Regards,
    Amit

  6. #6
    beeper's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2005
    Posts
    1
    It appears browsers such as firefox and opera et al do not correctly understand overflow x & y so you have to use auto. Then for IE you can add the x and y by using the *html hack as seen below (a bit late but there you go) This makes blue scrollers and a light blue background but its easy to change.

    IN YOUR CSS
    Code:
    .scroll{
    	height:100px;
    	overflow:auto;
    	margin:0; padding:5px; border:0;
    	scrollbar-face-color: #6095C1;
    	scrollbar-highlight-color: #C2D7E7;
    	scrollbar-3dlight-color: #85AECF;
    	scrollbar-darkshadow-color: #427AA8;
    	scrollbar-shadow-color: #315B7D;
    	scrollbar-arrow-color: #FFFFFF;
    	scrollbar-track-color: #4DECF8S;
    	text-align:justify;
    	background-color: #E1F2FB;
    }
    * html .scroll{
    	overflow-y: scroll; 
    	overflow-x: hidden;
    }
    IN THE HTML
    Code:
    <div class="scroll">
       <p>Ullamco laboris nisi in reprehenderit in voluptate ut enim ad minim veniam. Velit esse cillum dolore qui officia deserunt consectetur adipisicing elit. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Cupidatat non proident, mollit anim id est laborum. Lorem ipsum dolor sit amet, velit esse cillum dolore ut labore et dolore magna aliqua.</p>
    <p>Ut aliquip ex ea commodo consequat. Qui officia deserunt quis nostrud exercitation sunt in culpa. Ut enim ad minim veniam, duis aute irure dolor quis nostrud exercitation.</p>
      </div>
    Last edited by beeper; 01-25-2005 at 10:47 AM.

  7. #7
    nmsmajeeth's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2009
    Posts
    1

    Re: Need horizontal scroll in table (no vertical)

    Thanx
    I tried a lot
    ur code helps me to attach scrollbar in a table...
    Thanx



Tags for this Thread