PDA

View Full Version : can i mimic table "header footer and stroller in between" that Netscape has?

umen
04-24-2003, 10:40 PM
Hello
what i mean is that i need to find some way to make table that has header and footer and the
rows in-between can have scroller that scroll them say if i define the is will show only 5 rows
between the header and the footer and pass that i will have scroller to scroll the rows ..
i need it to IE 6 every thing can go , any new technology Microsoft has to offer , but how the hell
to program this kind if table??
i need some ideas ..
thanks for the helpers
cg9com
04-25-2003, 09:26 AM
You can use the CSS overflow property.
http://www.w3schools.com/css/pr_pos_overflow.asp

Define a width and height for your container element, then add in your overflow, this can all be done using basic CSS.

Heres an example:

<div style="height:50px;width:200px;overflow:scroll;">
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
</div>

This won't look pretty, but it shows what I think you're trying to accomplish.
<div> is your container, and everything inside style="" formats it.
The content<br> thing is just to make way for the scrolling.

Hope this helps :thumbsup:
umen
04-25-2003, 10:31 AM
Hello and thanks for the reply
well the first thing i was thinking about its this way ... but its not so easy
when i insert new table inside this div i don't want it first of all to open me width scroller
and the second thing and the must annoying the height scroller is making all the inner table to
be "unaligning" to the container table , what i need if to find way that when the table will know that its
need for ascroller it will give me the scroller as part of the last (in this case the most right column) space and in
that way it will not break the align of the inner table...
wow.. i hope you understand me here .
here is the table html code that is wrong and making the problem
---------------------------------------------------------------------------------
<body>
<table style="table-layout:fixed" border="1" width="400" height="400" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
</tr>
<tr>
<td valign="top" height="80%" colspan="4">
<div style="height:100%;width:400px;overflow:auto;">
<table border="1" width="389" height="400" cellpadding="" cellspacing="" bgcolor="">
<tr>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top" height="10%" colspan="4">CELL C</td>
</tr>
</table>
umen
04-25-2003, 10:34 AM
one more small thing , i just notice you moved it to html & css forum
im afraid that in this case there is need for programmable solution , i dont care to make spatial table
object in js or something ,only to make it work
thanks!
cg9com
04-26-2003, 08:30 AM
I just posted an example, you can integrate the overflow property (along with width/height) into your tables, or whatever section is needed.
umen
04-26-2003, 10:24 AM
hi tnx for the reply
well when i change the overflow:scroll and the div width to 400 , i still have the width scroller and the height scroller on top of
right column , and it gives me aligning problems , what i meant is that the height scroll will be NOT on top of the column but as
part of the space the right column , so the inner table will stay fixed to its position with on width scroller
hope you understand me here...
thanks.
Mr J
04-26-2003, 07:28 PM
Hi.
I'm not sure if I totally understand your question but here are two versions to try.


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>

<table border="1" width="400" height="200" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" height="50" width="100">(table 1) CELL A</td>
<td valign="top" width="100">(table 1) CELL A</td>
<td valign="top" width="100">(table 1) CELL A</td>
<td valign="top" width="100">(table 1) CELL A</td>
</tr>
<tr>
<td valign="top" width="100">
<div style="width:100%;height:100%;overflow:auto">
The more content you put in these cells the more they will scroll<P>see
</div></td>
<td valign="top" width="100">
<div style="width:100%;height:100%;overflow:auto">
Scrollbar shows when needed
</div></td>
<td valign="top" width="100">
<div style="width:100%;height:100%;overflow:auto">
Just add contents to make scrollbars appear
</div></td>
<td valign="top" width="100">
<div style="width:100%;height:100%;overflow:auto">
Contents<BR>
Contents<BR>
Contents<BR>
Contents<BR>
Contents<BR>
Contents<BR>
</div></td>
</tr>
<tr><td valign="top" height="50" colspan="4">CELL C</td></tr>
</table>

<P><table border="1" width="400" height="200" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" height="50" width="100">(table 1) CELL A</td>
<td valign="top" width="100">(table 1) CELL A</td>
<td valign="top" width="100">(table 1) CELL A</td>
<td valign="top" width="100">(table 1) CELL A</td>
</tr>
<tr>
<td valign="top" colspan="4">
<div style="width:100%;height:100%;overflow-x:hidden;overflow-y:auto">
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
<P>The more content you put in these cells the more they will scroll
</div></td>
</tr>
<tr><td valign="top" height="50" colspan="4">CELL C</td></tr>
</table>
</BODY>
</HTML>
umen
04-26-2003, 08:08 PM
hi
well i guess this is what i need :
but there is small problem there is somekind of pixel that breaking the align between the 2 table , how can i fix that?
i mean if you look you will see that the columns of the inner table is moving something like 2 pixels to right is there any way to fix that?
thanks!
------------------------------------------------------------------------------
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<table STYLE="table-layout:fixed" border="1" width="400" height="400" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
</tr>
<tr>
<td valign="top" height="80%" colspan="4">
<div style="height:100%;width:400px;overflow-x:hidden;overflow-y:auto">
<table STYLE="table-layout:fixed" border="1" width="400" height="450" cellpadding="" cellspacing="" bgcolor="">
<tr>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
</tr>
<tr>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
<td valign="top" height="10%" width="100">(table 1) CELL A</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top" height="10%" colspan="4">CELL C</td>
</tr>
</table>
</body>
</html>
Mr J
04-26-2003, 08:23 PM
Change the widths of the cells in the inner table to 99.

This seemed to work
cg9com
04-26-2003, 08:25 PM
maybe you are'nt compinsating space for your border?