• 0

Do some table header magic in tables?


Question

I have a table and it is pretty long in html. I want the header cells

(<th>) to sort of "float" (not float as in float left or right) above the

table so that as you scroll down the table you can always see the headers.

I'm wanting to do it in CSS, and don't think it will require any sort of

javascript. I've seen it done before with other paragraph level blocks, but

never could understand how to apply the CSS to column header blocks. Does

it basically work the same way?

thanks!

-Nic

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Easy to do with Mozilla. However, IE may require some nested divs within your table cells. In either case, the key is to use the overflow: auto property in CSS.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Table Test&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
&lt;style type="text/css"&gt;
table{
    border: thin solid red;
    width: 50em;
}
tbody{
    height: 4em;
    overflow: auto;
}
td{
    border: thin solid black;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;thead&gt;
    &lt;tr&gt;&lt;th&gt;start 1&lt;/th&gt;&lt;th&gt;start 2&lt;/th&gt;&lt;th&gt;start 3&lt;/th&gt;&lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
    &lt;tr&gt;&lt;td&gt;end 1&lt;/td&gt;&lt;td&gt;end 2&lt;/td&gt;&lt;td&gt;end 3&lt;/td&gt;&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
    &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

edit: changed TD to TH in the header row...

Edited by Oogle
Link to comment
Share on other sites

  • 0
BTW regarding your sig, HTML 4.01 is obsolete, please link XHTML 1.0 :D

Heh, I won't consider the HTML standard obsolete until a 4.02/5.0 version comes out, or until the W3C formally abandons it. Besides, the XHTML spec only describes an extension to HTML, not a replacement. It also doesn't contain the helpful tag references that the 4.01 spec provides.

But I'll go ahead an add one, just for those web author elitists out there... ;)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.