38 users online (0 members and 38 guests)  


  Results 1 to 9 of 9

Related

  1. Horizontal Scroller    Forum: CSS Forum
    Replies: 6
  2. scroller seed does't get slower    Forum: Javascript Forum
    Replies: 0
  3. news scroller direction    Forum: HTML Forum
    Replies: 0
  4. SCROLLER TABLE help!    Forum: CSS Forum
    Replies: 2
  5. Scroller bar, in a section of a table    Forum: HTML Forum
    Replies: 15
  1. #1
    darken's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    4

    scroller table in CSS- if possible

    Hi
    I am working on a site that needs to look very pro, and I am stuck at a table
    is there a way to make a table scrollable and to use it with CSS- a.i. positioned ?
    thank you

  2. #2
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    Hiya!

    I saw this same question a couple of days ago. Try seaching the forums. It was done with a table I'm trying to find it but I have to search some more. If you were to do it with css you would have to have:

    overflow: scroll

    Ywun

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there darken,

    Here is the code for a scrollable table
    Code:
    <html>
    <head>
    <title>Scrollable Table</title>
    <style type="text/css">
    <!--
    body
       {
        background-color: #f2f8ff;
        }
    div.one
       {
        border-style: solid;
        border-width: 1px;
        border-color: #000080;
        overflow: auto; 
        scrollbar-face-color: #e5f1ff;
        width: 363px;
        height: 199px;
        position: relative;
        top:20%;
        left: 20%;
       }
    table.one
       {
        width: 364px;
        height: 200px;
       }
    td.one
       {
        font-family: comic sans ms;
        font-size: 24px;
        font-style: italic;
        font-weight: bolder;
        color: #000080;
        text-align: center;
        }
    //-->
    </style>
    </head>
    <body>
    
    <div class="one">
    <table class="one"><tr>
    <td class="one">This is a scrollable table</td>
    </tr>
    </table>
    <div>
    
    </body>
    </html>
    This looks enormous but if you put the css in an external file it will be very compact

    coothead

  4. #4
    darken's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    4
    thank you
    is there a way to only have the side scroller?

  5. #5
    darken's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    4
    nevermind, I got it
    thanks a million

  6. #6
    SLOPSBOP's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Posts
    1
    Quote Originally Posted by darken
    thank you
    is there a way to only have the side scroller?
    CAN U TELL ME HOW U HAD ONLY ONE SCROLLER ON THE SIDE

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there SLOPSBOP,

    To remove the bottom scrollbar, it is only necessary to alter either the div or the table width in the style sheet....

    In this instance it disappears when you add 19px to the div width or...
    subtract 19px from the table width

    cthead

  8. #8
    Pyna's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2004
    Posts
    1
    is there a way to make the scrollbars invisible unless there is enough text to make them visible automatic ?

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Pyna,

    Welcome to these forums.
    Try this modified, and better, code...
    Code:
    <html>
    <head>
    <title>Scrollable Table</title>
    <style type="text/css">
    <!--
    body
       {
        background-color:#cccccc;
        }
    div
       {  
        position:absolute;
        top:50%;
        left: 50%;
        margin-left:-163px;
        margin-top:-101px;
       }
    p
       {   
        width: 364px;
        height: 200px;
        overflow:auto; 
         padding:10px;
       }
    td
       {
        border: solid 1px #000000;
        font-family: arial;
        font-size: 24px;
        color: #000000;
        text-align: center;
        background:#ffffff;
       }
    //-->
    </style>
    </head>
    <body>
    
    <div>
    <table ><tr>
    <td ><p>Lorem ipsum dolor sit amet, consectetuer
     adipiscing elit. Praesent blandit venenatis purus.
     Integer massa libero, vehicula id, consequat sed, 
    tincidunt nec, purus. Class aptent taciti sociosqu ad 
    litora torquent per conubia nostra, per inceptos 
    hymenaeos. Suspendisse potenti. Nunc vulputate 
    magna non magna. Aenean lorem eros, adipiscing 
    quis, semper non, dictum a, nunc. Curabitur ut sem.
     Pellentesque a est id neque hendrerit ultrices. Donec 
    vulputate tincidunt turpis. Curabitur dignissim 
    vestibulum nunc. Aliquam felis lorem, ultrices sit amet, 
    convallis a, accumsan vel, ante. Proin aliquam turpis 
    sed augue. In pellentesque, magna a pulvinar 
    adipiscing, est orci adipiscing felis, sed laoreet urna 
    magna quis neque. Proin facilisis aliquet 
    urna.</p></td>
    </tr>
    </table>
    </div>
    
    
    </body>
    </html>
    When you run this code you will have the right hand scrollbar...
    reduce the text and the scrollbar will disappear...eventually

    cthead



Tags for this Thread