191 users online (0 members and 191 guests)  

> > > > scroller table in CSS- if possible

  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. 09-20-2003, 11:27 AM #1
    darken
    darken is offline
    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
    Reply With Quote Reply With Quote
  2. 09-20-2003, 11:46 AM #2
    Ywun
    Ywun is offline
    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
    Reply With Quote Reply With Quote
  3. 09-20-2003, 01:27 PM #3
    coothead
    coothead is offline
    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
    733
    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
    Reply With Quote Reply With Quote
  4. 09-21-2003, 02:43 AM #4
    darken
    darken is offline
    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?
    Reply With Quote Reply With Quote
  5. 09-21-2003, 02:46 AM #5
    darken
    darken is offline
    darken's Avatar
    New User
    Status
    Offline
    Join Date
    Sep 2003
    Posts
    4
    nevermind, I got it
    thanks a million
    Reply With Quote Reply With Quote
  6. 09-30-2003, 11:05 AM #6
    SLOPSBOP
    SLOPSBOP is offline
    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
    Reply With Quote Reply With Quote
  7. 09-30-2003, 11:38 AM #7
    coothead
    coothead is offline
    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
    733
    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
    Reply With Quote Reply With Quote
  8. 03-04-2004, 12:02 PM #8
    Pyna
    Pyna is offline
    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 ?
    Reply With Quote Reply With Quote
  9. 03-04-2004, 01:23 PM #9
    coothead
    coothead is offline
    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
    733
    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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread