Fixed header table

**HappyPike** · Aug 22, 2007 21:23

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.

**all4nerds** · Aug 23, 2007 00:52

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>

**Paul O'B** · Aug 23, 2007 03:55

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.

**HappyPike** · Aug 23, 2007 07:17

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.

**Paul O'B** · Aug 23, 2007 07:37

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

**HappyPike** · Aug 28, 2007 07:07

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!

**HappyPike** · Aug 28, 2007 09:14

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.

**Paul O'B** · Sep 1, 2007 10:45

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

**HappyPike** · Sep 1, 2007 15:55

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!

**HappyPike** · Sep 3, 2007 18:23

Originally Posted by HappyPike

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.

**Paul O'B** · Sep 4, 2007 04:43

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.

**HappyPike** · Sep 4, 2007 07:38

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.

User Tag List

Thread: Fixed header table

Thread Tools

Display

Fixed header table

Bookmarks

Bookmarks

Posting Permissions