SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed header table

    Hi,

    I am interested in creating a scrollable table with fixed header.

    Any idea how I could achieve that?

    I am also interested in a version that has both fixed header and footer.

    Thanks in advance.
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Position absolute for modern browsers, and make use what IE < 7 can do for you
    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">
    <head>
    <title>Scrollable 100&#37; high element</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    
    body{height:100%;font-size:75%;background:#a2a2a2;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    }
    
    html{padding:0 0;}
    
    .wra,.he,.fo{overflow:auto;}
    
    .wra{background:#d8d8d8;}
    
    head+body .wra{top:10em;bottom:10em;position:absolute;}
    
    .he,.fo{background:#ff8c00;height:10em;position:absolute;}
    
    .wra,.he,.fo{right:0;left:0;}
    
    .he{top:0;}
    
    .fo{bottom:0;}
    
    p{margin:.2em .5em .3em .5em;}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    
    html{overflow:hidden;}
    
    * html {padding:10em 0;} 
    
    * html body{padding:10em 0;padd\ing:0}
    
    * html .wra{height:100%;}
    
    * html .w{width:100%;}
    
    </style>
    <![endif]-->
    </head>
    <body>
    <!--  -->
    <div class="he w">
    <h1>header</h1>
    <p>Basic 1 Column with Containers</p>
    </div>
    
    <div class="wra">
    <p>start</p>
    <!--  -->
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    
    <p>end</p>
    
    
    </div>
    
    <div class="fo w">
    <p>footer</p>
    </div>
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If this is for tabular data then theoretically you can simply set a height on the tbody element and the tfoot and thead elements will remain in place while the tbody scrolls.

    This works fine in Firefox 2.0 but opera and iE doesn't like it.

    We can use a fix for IE to make the header appear fixed and other browers should just get a normal table (with any luck).

    Heres the example:

    http://www.pmob.co.uk/temp/table-fixed-header.htm

    The advantage of the above methods is that the header and footer cells will expand in line with the content unlike other fixed position methods that need a fixed width and will not match headers with cell content.

    If you wanted to do this manually then you could simply set the data in a table with a wrapper with a set height set to scroll. Then you simply place your headers and footers outside this wrapper in separate tables. Of course this removes them from the original table and is not very semantic. The method I used above is the most semantic way to do this without using javascript etc.


    Hope it helps.

  4. #4
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies.

    My situation is the opposite: the fixed header and scrolling works in IE in the codes I inherited, but in FireFox all the table column data got squeezed in the first column.
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    My example works fine in Firefox2 so use that (It also works in IE with the fixed header).

    You'll have to show us the code you are working with but my method is bound to be better

  6. #6
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    You method is very clean and indeed better. In the codes I have, I found out Javascript is used to apply different classes depending on browser. It's very messy. It also had to use a resize function to resize each column to make the columns align in FireFox and this required setting the column width values in an array.

    I will apply your method and post here if I need more help.

    Thanks!
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson

  7. #7
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I noticed something strange in IE 7...

    The DOCTYPE can make a big difference in the result. If I change the DOCTYPE from:

    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"><head>
    to

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    It doesn't work in IE 7.

    It still works when I use XHTML transitional DOCTYPE though.

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    I didn't know there is such a big difference in rendering between HTML and XHTML doctypes.
    Last edited by HappyPike; Aug 28, 2007 at 14:24.
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    noticed something strange in IE 7...

    The DOCTYPE can make a big difference in the result. If I change the DOCTYPE from:
    Hi,

    Doctypes are used to switch between different rendering modes and the triggers are different depending on the browsers concerned.

    The 4.01 doctype without URI (which you have shown) will trigger quirks mode in IE versions 6 and 7. This means that they will revert to legacy behaviour and use the broken box model among many other things. Indeed in IE7 you will lose all the improvements made in ie7 completely.

    Use a full doctype including URI and you will be ok.

    Look at the list on this page for further information:

    http://www.ericmeyeroncss.com/bonus/render-mode.html

  9. #9
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info, Paul!

    Another thing, is it possible to make your fixed header method work in IE without using the

    <div id="wrap">
    </div>

    to surround the table?

    My table is generated by the displaytag tag library in JSP and the codes look something like this:

    Code:
    [pagination codes]
    <table id="" class="">
    ........
    </table>
    [pagination codes]
    To surround the table with a <div>, it seems I would need to modify the tag library source codes to add the div tag to the output.

    If I add the div tag to the JSP page directly, the div tag would surround the entire table along with the pagination codes.
    Code:
    <div id="" class="">
    [pagination codes]
    <table id="" class="">
    ........
    </table>
    [pagination codes]
    </div>
    Thanks for your help!
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson

  10. #10
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by HappyPike View Post
    Another thing, is it possible to make your fixed header method work in IE without using the

    <div id="wrap">
    </div>

    to surround the table?
    Paul, any idea?

    Thanks.
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Unfortunately IE needs that wrap as it won't scroll any parts of a table. A table will always expand in IE and therefore the scroll bar wouldn't appear.

    You coud of course put the whole thing isnide a table but I guess that won't help at all either.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrap{
        float:left;
        margin:100px;
    }
    #data tfoot,#data thead{
        background:#fff;
    }
    #data tfoot td,#data thead th{    
        border:none;    
        font-weight:bold;
        text-align:center;
        background:#fff;
    }
    table#data{background:#ffffcc;}
    #data th{
        padding:5px 10px;
        text-align:center;
    }
    #data td{
        padding:5px;    
        border:1px solid #000;
        text-align:center;
    }
    #data tbody{
        height:200px;
        overflow-y:scroll;
      overflow-x:hidden;
    }
    .last{padding-right:16px;}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    #wrap{
        overflow-y:auto;
        padding-right:16px;
        height:200px;
        overflow-x:hidden;
    }
    #data tbody{
        height:auto;
        overflow:auto;
    }
    tr.iefix{
        z-index:999;
        border:none;
        border:none;    
        position:relative;
        background:#fffccc;
    }
    
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>Table with fixed header and footer in Firefox 2.0</h1>
    <p>IE will have a fixed header only</p>
    <p>This is unlikely to work in most other browsers but they should just get a normal table.</p>
    <table>
        <tr>
            <td><div id="wrap">
                    <table id="data" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr class="iefix">
                                <th>jan</th>
                                <th>feb</th>
                                <th>mar</th>
                                <th>apr</th>
                                <th>may</th>
                                <th>jun</th>
                                <th>jul</th>
                                <th>aug</th>
                                <th class="last">sep</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>jan</td>
                                <td>feb</td>
                                <td>mar</td>
                                <td>apr</td>
                                <td>may</td>
                                <td>jun</td>
                                <td>jul</td>
                                <td>aug</td>
                                <td class="last">sep</td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>3</td>
                                <td>5</td>
                                <td>1</td>
                                <td>1</td>
                                <td>3</td>
                                <td>1</td>
                                <td>5</td>
                                <td class="last">7</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>3</td>
                                <td>5</td>
                                <td>1</td>
                                <td>1</td>
                                <td>3 more data</td>
                                <td>1</td>
                                <td>5</td>
                                <td  class="last">7</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>4</td>
                                <td>6</td>
                                <td>1</td>
                                <td>23</td>
                                <td>4</td>
                                <td>1</td>
                                <td>6</td>
                                <td class="last">6</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>6</td>
                                <td>1</td>
                                <td>4</td>
                                <td>7</td>
                                <td>1</td>
                                <td>7</td>
                                <td class="last">6</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>2</td>
                                <td>3</td>
                                <td>3</td>
                                <td>3</td>
                                <td>8</td>
                                <td>2</td>
                                <td>8</td>
                                <td class="last">6</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>4</td>
                                <td>4</td>
                                <td>4</td>
                                <td>2</td>
                                <td>9</td>
                                <td>4</td>
                                <td>4</td>
                                <td class="last">6</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>4</td>
                                <td>5</td>
                                <td>5</td>
                                <td>2</td>
                                <td>0</td>
                                <td>3</td>
                                <td>23</td>
                                <td class="last">6</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>4</td>
                                <td>2</td>
                                <td>67</td>
                                <td>2</td>
                                <td>1</td>
                                <td>4</td>
                                <td>4</td>
                                <td class="last">4</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>4</td>
                                <td>3</td>
                                <td>1</td>
                                <td>2</td>
                                <td>2</td>
                                <td>5</td>
                                <td>65</td>
                                <td class="last">4</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>4</td>
                                <td>4</td>
                                <td>1</td>
                                <td>2</td>
                                <td>13</td>
                                <td>6</td>
                                <td>7</td>
                                <td class="last">4</td>
                            </tr>
                        </tbody>
                    </table>
                </div></td>
        </tr>
    </table>
    </body>
    </html>

    I think you are stuck with this or you may have to use one of the javascript solutions available for this type of thing.

  12. #12
    SitePoint Enthusiast HappyPike's Avatar
    Join Date
    Jan 2005
    Location
    USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, Paul. I appreciate it.

    I think I'll have to modify the Java source codes of displaytag and add the div to the output.
    The only way to have a friend is to be one. ~ Ralph Waldo Emerson


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
  •