...

View Full Version : table topic and scrollbared content



umen
10-02-2002, 07:41 PM
Hello folks
can i make that one table will hold the topic columns something like :

topic_1 | topic_2 | topic_3

and then the content columns (the one's that beneath the topics ) will with scroller
so i will be abele to scroll them BUT without moving the topic's columns.

i hope you did understand what im trying to get here...
thanks!

Bosko
10-02-2002, 08:07 PM
Yes,use the THEAD, TFOOT and TBODY elements,here's an example:


<table cellpadding="2" cellspacing="0" style="border: 1px solid ;">
<thead style="background-color: rgb(192, 192, 192);">

<tr>
<th style="border-bottom-width: 1px; border-bottom-style: solid;">Header 1</th>
<th style="border-bottom-width: 1px; border-bottom-style: solid;">Header 2</th>
<th style="border-bottom-width: 1px; border-bottom-style: solid;">Header 3</th>
</tr>
</thead>
<tfoot style="background-color: rgb(192, 192, 192);">

<tr>
<td style="border-top-width: 1px; border-top-style: solid;">Footer 1</td>
<td style="border-top-width: 1px; border-top-style: solid;">Footer 2</td>
<td style="border-top-width: 1px; border-top-style: solid;">Footer 3</td>
</tr>
</tfoot>
<tbody style="max-height: 12ex; overflow: auto;">

<tr>
<td>Row 1 Cell 1 </td>
<td>Row 1 Cell 2 </td>
<td>Row 1 Cell 3 </td>
</tr>
<tr>
<td>Row 2 Cell 1 </td>

<td>Row 2 Cell 2 </td>
<td>Row 2 Cell 3 </td>
</tr>
<tr>
<td>Row 3 Cell 1 </td>
<td>Row 3 Cell 2 </td>
<td>Row 3 Cell 3 </td>

</tr>
<tr>
<td>Row 4 Cell 1 </td>
<td>Row 4 Cell 2 </td>
<td>Row 4 Cell 3 </td>
</tr>
<tr>

<td>Row 5 Cell 1 </td>
<td>Row 5 Cell 2 </td>
<td>Row 5 Cell 3 </td>
</tr>
<tr>
<td>Row 6 Cell 1 </td>
<td>Row 6 Cell 2 </td>

<td>Row 6 Cell 3 </td>
</tr>
<tr>
<td>Row 7 Cell 1 </td>
<td>Row 7 Cell 2 </td>
<td>Row 7 Cell 3 </td>
</tr>

<tr>
<td>Row 8 Cell 1 </td>
<td>Row 8 Cell 2 </td>
<td>Row 8 Cell 3 </td>
</tr>
<tr>
<td>Row 9 Cell 1 </td>

<td>Row 9 Cell 2 </td>
<td>Row 9 Cell 3 </td>
</tr>
<tr>
<td>Row 10 Cell 1 </td>
<td>Row 10 Cell 2 </td>
<td>Row 10 Cell 3 </td>

</tr>
<tr>
<td>Row 11 Cell 1 </td>
<td>Row 11 Cell 2 </td>
<td>Row 11 Cell 3 </td>
</tr>
<tr>

<td>Row 12 Cell 1 </td>
<td>Row 12 Cell 2 </td>
<td>Row 12 Cell 3 </td>
</tr>
<tr>
<td>Row 13 Cell 1 </td>
<td>Row 13 Cell 2 </td>

<td>Row 13 Cell 3 </td>
</tr>
<tr>
<td>Row 14 Cell 1 </td>
<td>Row 14 Cell 2 </td>
<td>Row 14 Cell 3 </td>
</tr>

<tr>
<td>Row 15 Cell 1 </td>
<td>Row 15 Cell 2 </td>
<td>Row 15 Cell 3 </td>
</tr>
</tbody>
</table>

umen
10-02-2002, 08:52 PM
Hello
thanks for the fast reply , but do i miss here something ?
i see you did separated the header and the body but i need the body part to be scrolled
that is if i have like 10 rows and the table size can able to show only 5 row so in result
there will be scroller in the right side of the table body so it will able me to scroll up and down
the rows

hope i made my self clear
thanks!!

Bosko
10-02-2002, 09:02 PM
Yes,you are missing something,the code does exactly what you wanted.Just take a look at this screenshot:

http://brainjar.com/dhtml/tablesort/graphics/figure1.gif

umen
10-02-2002, 09:12 PM
ok .. now im sure there is something wrong here with my side .
do this support IE 5.5?
by the way this is exactly how i need it to be!
here is screen shoot how the table looks in my browser.

Bosko
10-02-2002, 09:19 PM
Hmmm,appearantly IE 5.5 doesn't support this,that's what you get when a browser doesn't want to support W3 recommendations...
Switch to Mozilla if you want it to work,or (try to) make a workaround for IE.

umen
10-02-2002, 09:38 PM
well this is was my first geas the moment i show that
tbody don't support overflow style and max-height is not even
known style in msdn but im sorry the ppl at work wants only IE
yeah im trying ... but its not working ...
it even can be only work in IE 6 ...
there must to be some kind of hack for this ..

thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum