scroller table in CSS- if possible

**darken** · 09-20-2003, 11:27 AM

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

**Ywun** · 09-20-2003, 11:46 AM

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

**coothead** · 09-20-2003, 01:27 PM

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

**darken** · 09-21-2003, 02:43 AM

thank you
is there a way to only have the side scroller?

**darken** · 09-21-2003, 02:46 AM

nevermind, I got it
thanks a million

**SLOPSBOP** · 09-30-2003, 11:05 AM

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

**coothead** · 09-30-2003, 11:38 AM

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

**Pyna** · 03-04-2004, 12:02 PM

is there a way to make the scrollbars invisible unless there is enough text to make them visible automatic ?

**coothead** · 03-04-2004, 01:23 PM

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

Thread: scroller table in CSS- if possible

Thread Tools

Related

Horizontal Scroller Forum: CSS Forum

scroller seed does't get slower Forum: Javascript Forum

news scroller direction Forum: HTML Forum

SCROLLER TABLE help! Forum: CSS Forum

Scroller bar, in a section of a table Forum: HTML Forum

scroller table in CSS- if possible

Tags for this Thread

Cloudjiffy- PaaS for Developers