Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Looking to freeze table headers

    Is there someway to freeze the header row of a table so if there are many rows you can still see the headers?

    Thanks in advance,
    Dan

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Frames won't allow (without pixel-based positioning of cells, which should be avoided) the headers outside a scrolling area to line up with the columns inside the scrolling area.

    Try something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
    <head>
    	<title>Scrolling Table Body</title>
    	<style type="text/css">
    		table.scroll {
    			height: 3em;
    			overflow: scroll;
    		}
    		table.scroll tbody {
    		    height: 2em;
    		    overflow: auto;
    		}
    		table.scroll tbody tr, table.scroll tbody td {
    			height: auto;
    		}
    	</style>
    </head>
    <body>
    <table class="scroll">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
            <th>Footer 3</th>
        </tr>
    </tfoot>
    <tbody>
        <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>
    </tbody>
    </table>
    </body>
    </html>
    It won't be very backward-compatible, but it should treat you just fine in modern browsers. A little testing proves my theory correct: it works in Firebird, and fails in IE 6.

    Well, I'm sure there's some way.

  • #4
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up That is what I was looking for!

    Thanks, that did the trick!
    Dan


  •  

    Posting Permissions

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