SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed table headers with scrolling body

    I need to have a table displayed within a form on a webpage, but the content of the table could get large. In order for it to not mess up the layout of the form, I'd like to make the table be displayed within a scrollable div. I've done this already with no problem by simply doing something like this:

    <div style="height: 200px; overflow: auto;">
    <table>
    ...
    </table>
    </div>

    However, I'd like to keep the column headers from scrolling. I can create another table outside of the scrolling div with just the column headers in them, but then they don't like up properly with the columns in the table inside the scrolling div. Because they aren't the same table, the widths are different.

    The only solution that works this way is to set fixed widths for all the columns in both the inside table and the outer table with column headers in it. But that won't work for me because I want the table to be liquid and shrink or expland depending on the width of the browser window.

    I've messed with moving the height and overflow settings to the <tbody> tag, but this doesn't seem to work. It makes each row of the table the value of the height tag, and doesn't do anything to scroll it. For instance:

    <div>
    <table>
    <thead>
    ...
    </thead>
    <tbody style="height: 200px; overflow: auto;">
    ...
    </tbody>
    </table>
    </div>

    Does anyone have any ideas or solutions to this problem?

    Thanks!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This works for me, but only in Mozilla. Opera and IE fail pretty badly:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Scrolling table</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    /*<!CDATA[[*/
    table {
    }
    tbody {
    	height: 100px;
    	overflow: auto;
    	
    }
    td, th {
    }
    td {
    	color: #a04341;
    	background: white;
    }
    th {
    	color: white;
    	background: #a04341;
    }
     /*]]>*/
    </style>
    </head>
    <body>
    	<div id="everything">
    		<table summary="scrolling table">
    		<caption>Scrolling table</caption>
    
    			<thead>
    				<tr>
    					<th>Col 1</th>
    					<th>Col 2</th>
    					<th>Col 3</th>
    					<th>Col 4</th>
    				</tr>
    
    			</thead>
    			<tfoot>
    				<tr>
    					<th>Col 1</th>
    					<th>Col 2</th>
    					<th>Col 3</th>
    					<th>Col 4</th>
    
    				</tr>
    			</tfoot>
    			<tbody>
    				<tr>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    
    					<td>sample text</td>
    				</tr>
    				<tr>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    
    				</tr>
    				<tr>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    				</tr>
    
    				<tr>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    				</tr>
    				<tr>
    
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    				</tr>
    				<tr>
    					<td>sample text</td>
    
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    				</tr>
    				<tr>
    					<td>sample text</td>
    					<td>sample text</td>
    
    					<td>sample text</td>
    					<td>sample text</td>
    				</tr>
    				<tr>
    					<td>sample text</td>
    					<td>sample text</td>
    					<td>sample text</td>
    
    					<td>sample text</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    USA
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been trying to do the same thing. While searching on the internet, I found a site that does this in two different ways. It seems to work in IE and Mozilla (better in IE, IMO) and supposedly fails in Opera. I have no clue whether it works on Macs.

    http://web.tampabay.rr.com/bmerkey/e...le-header.html
    http://web.tampabay.rr.com/bmerkey/e...e-header2.html


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
  •