Wrox Home  
Search P2P Archive for: Go

  Return to Index  

html_code_clinic thread: Table headers and scrolling body


Message #1 by "Ramona Reed" <ramona.reed@u...> on Thu, 8 Aug 2002 14:59:17
Hi Ramona,

The code below does more or less what you want: it uses inline scroll bars 
to scroll a table inside a page without affecting other content.
One thing that you requested doesn't work: the scrolling still moves the 
table headers away. If I had had more time, I would have adapted the code 
to do what you wanted, but unfortunately I don't have the time right now, 
but wanted to post this anyway.


What you could do to make the headers stick is create a table with two 
rows, 1 column. Row one contains a complete table with the headers you 
need. Row two contains the div with the overflow attribute set.

Note that this won't work on all browsers.

HtH


Imar


P.S. If you don't see the scrollbars, simply copy the datarows a couple of 
times (the clsSortItem rows). Scrolling will not take place when there are 
not enough lines.



<div style="overflow:auto; width : 800px; height:75px;margin: 0px">
<table width="100%" class="sortTable" cellspacing="0" cellpadding="0">
<thead>
<tr>
         <!-- Table Headers -->
         <td class="clsSortHeading">AanleverTransportDoor</td>
         <td class="clsSortHeading">AanleverAdres</td>
         <td class="clsSortHeading">AanleverPostcode</td>
         <td class="clsSortHeading">AanleverPlaats</td>
         <td class="clsSortHeading">AanleverContPers</td>
</tr>
</thead>
<tbody>
<tr>
         <td class="clsSortItem">Aanl trans</td>
         <td class="clsSortItem">Aanadres</td>
         <td class="clsSortItem">aanpost</td>
         <td class="clsSortItem">aanplaatrs</td>
         <td class="clsSortItem">aanplaatrs</td>
</tr>
<tr>
         <td class="clsSortItem">Aanl trans</td>
         <td class="clsSortItem">Aanadres</td>
         <td class="clsSortItem">aanpost</td>
         <td class="clsSortItem">aanplaatrs</td>
         <td class="clsSortItem">aanplaatrs</td>
</tr>
</tbody></table></div>



At 02:59 PM 8/8/2002 +0000, you wrote:
>I have been trying.... unsuccessfully, to make my headers in a table
>remain stationary while the body of the page can scroll. I have tried
>various methods (THEAD...TBODY, splitting my table into 2 tables and using
>TD width='???' within frames) and nothing seems to work. If anyone has an
>idea of how I can make this a reality, please let me know.



  Return to Index