SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrollable HTML table with fixed headers

    I have searched the web for hours looking for an example of how to code a scrollable HTML table that has fixed headers (basically I want to scroll through the table but the headers should always be froze at the top of the table). Has anyone seen an example like this that I could reference? I prefer it not to be based on a Prototype JavaScript framework but Dojo would be acceptable... I guess best case scenario would to have it not be based on any JavaScript framework.

    Thanks in advance for your time.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try google-

    Results about 381,000 for scrollable HTML table fixed header javascript.
    (0.14 seconds)

  3. #3
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is awesome... thank you very much!!!

    For what its worth, I spent most of the day on Google yesterday and was not able to find a workable solution that was not heavily intertwined into a JavaScript framework. I have used Dojo a little but I did not want to use a 2nd framework since I thought it might get confusing having multiple JavaScript frameworks for one web app. Was I wrong to have this opinion?

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this thing also possible when the scrollbar is larger (height) so it sticks next to the header / footer while the content area just scrolls?

    Like in this example:


  6. #6
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What about CSS?

    I think you can make that happen with html and css

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Table Test</title>
    <style>
    table {
    	width: 500px;
    	height: 500px;
    }
    
    tbody {
    overflow: scroll;
    }
    
    
    </style>
    </head>
    <body>
    
    <table border="1">
    	<thead>
    		<tr>
    			<th>Heading</th>
    			<th>Another Heading</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>row 1, cell 1</td>
    			<td>row 1, cell 2</td>
    		</tr>
    		<tr>
    				<td>row 2, cell 1</td>
    				<td>row 2, cell 2</td>
    		</tr>
    
    	</tbody>
    </table>
    
    </body>
    </html>
    Something like that...

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the effort hannson. It doesn't work unfortunatelly because the scrollbar will not be next to the header.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •