PDA

View Full Version : scroll bar in table

ferdifeyenoord
07-09-2002, 11:44 PM
i'm working with tables but when i scroll down al the tables scroll down too nut i want only that the middlest table scrolls

how can i put a scrollbar in tables?
i need only a scrollbar in the middle table...

see the picture

http://www.planet.nl/~alphe040/scroll.jpg
Vladdy
07-09-2002, 11:52 PM
TBODY
{overflow:scroll;
}
however, looking the picture posted..... where is the table???
:confused: :confused:
maybe you do not need the table after all...
ferdifeyenoord
07-09-2002, 11:57 PM
Originally posted by Vladdy
TBODY
{overflow:scroll;
}
however, looking the picture posted..... where is the table???
:confused: :confused:
maybe you do not need the table after all...
i mean in the lay-out table
Vladdy
07-10-2002, 12:03 AM
1. Loose the table
2. Use overflow:scroll with your content division...
SYP}{ER
07-10-2002, 02:44 PM
That's what frames are for :)
BrainJar
07-12-2002, 04:31 PM
Theoretically, you can use the THEAD, TBODY and TFOOT tags to break a table up into headers, footers and data. Then use a style of overflow:auto and set a specific height on the TBODY tag so only that section scrolls.

As far as I know, it only works with Gecko-based browsers (i.e. not IE). Here's a sample page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Test</title>
<style type="text/css">

body {
font-family: sans-serif;
}

table {
border-color: #000000;
border-spacing: 0px;
border-style: solid;
border-width: 2px;
cell-spacing: 0px;
margin-left: auto;
margin-right: auto;
}

tbody.scrolling {
overflow: auto;
}

td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
padding: 2px;
padding-left: 6px;
padding-right: 6px;
}

td.numeric {
text-align: right;
}

th.numeric {
text-align: right;
}

tr.alt {
background-color: #c0f0c0;
}

</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
<thead>
<tr style="background-color:#008000;color:#ffffff;">
<th>Number</th>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
<th>Tax</th>
<th>Balance</th>
</tr>
<tr style="background-color:#90c090;color:#000000;">
<th colspan=5 style="text-align:right;">Starting Balance</th>
<th class="numeric">$5153.89&nbsp;&nbsp;&nbsp;&nbsp;</th>
</tr>
</thead>
<tfoot>
<tr style="background-color:#90c090;color:#000000;">
<th colspan=5 style="text-align:right;">Ending Balance</th>
<th class="numeric">$5881.95&nbsp;&nbsp;&nbsp;&nbsp;</th>
</tr>
</tfoot>
<tbody class="scrolling" style="max-height:14ex;">
<tr>
<td class="numeric">C1487</td>
<td class="numeric">04/05/00</td>
<td>Benton Bakery</td>
<td class="numeric">-$32.14</td>
<td>&nbsp;</td>
<td class="numeric">$5121.75&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="alt">
<td class="numeric">C1488</td>
<td class="numeric">04/05/00</td>
<td>Dave's Dry Cleaning</td>
<td class="numeric">-$14.21</td>
<td>&nbsp;</td>
<td class="numeric">$5107.54&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="numeric">&nbsp;</td>
<td class="numeric">04/07/00</td>
<td>Deposit</td>
<td class="numeric">$1231.57</td>
<td>&nbsp;</td>
<td class="numeric">$6339.11&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="alt">
<td class="numeric">DC102341</td>
<td class="numeric">04/07/00</td>
<td>Murray's</td>
<td class="numeric">-$54.31</td>
<td>Y</td>
<td class="numeric">$6284.80&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="numeric">C1488</td>
<td class="numeric">04/08/00</td>
<td>Greatland Auto Insurance</td>
<td class="numeric">-$119.52</td>
<td>&nbsp;</td>
<td class="numeric">$6165.28&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="alt">
<td class="numeric">C1489</td>
<td class="numeric">04/08/00</td>
<td>Northeast Energy</td>
<td class="numeric">-$68.21</td>
<td>&nbsp;</td>
<td class="numeric">$6097.07&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="numeric">DC115982</td>
<td class="numeric">04/10/00</td>
<td>Mobile</td>
<td class="numeric">-$22.19</td>
<td>Y</td>
<td class="numeric">$6074.88&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="alt">
<td class="numeric">C1490</td>
<td class="numeric">04/11/00</td>
<td>Consolidated Communications</td>
<td class="numeric">-$32.81</td>
<td>&nbsp;</td>
<td class="numeric">$6042.07&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="numeric">C1490</td>
<td class="numeric">04/12/00</td>
<td>Star Cable</td>
<td class="numeric">-$57.51</td>
<td>&nbsp;</td>
<td class="numeric">$5984.56&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="alt">
<td class="numeric">DC145998</td>
<td class="numeric">04/14/00</td>
<td>MegaBuy Office Supply</td>
<td class="numeric">-$102.61</td>
<td>Y</td>
<td class="numeric">$5881.95&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
</tbody>
</table>

</body>
</html>
applesauce
07-12-2002, 10:14 PM
what about using an iframe?
http://www.dallasair.org/aqi.html
Vladdy
07-12-2002, 11:38 PM
Frames are no longer part of HTML standard.
You can achieve the same effect using scrollable elements.
jkd
07-13-2002, 06:58 AM
Originally posted by Vladdy
Frames are no longer part of HTML standard.
You can achieve the same effect using scrollable elements.

Hardly, they are still in the doctype XHTML 1.1 uses (which uses the modular XHTML one for some stuff):

http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/dtd_module_defs.html#a_module_Frames
Vladdy
07-13-2002, 07:04 AM
I meant HTML Strict. Sorry.
The recomendation is to move away from them.
joh6nn
07-13-2002, 12:45 PM
yeah, but he suggested an iframe, not frames, and iframes are standard, and actually important for many, more-advanced scripting functions.

however, brainjar's solution is probably the best, and it will work in IE, too. will work in IE5, too, IIRC.