Shadrack Posted February 10, 2003 Share Posted February 10, 2003 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 More sharing options...
0 axis Posted March 12, 2003 Share Posted March 12, 2003 I am not quite sure about that and don't want to give false information, so I will direct you to a great site for CSS and everything web designs. http://www.w3schools.com Link to comment Share on other sites More sharing options...
0 Oogle Posted March 13, 2003 Share Posted March 13, 2003 (edited) 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Table Test</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> table{ border: thin solid red; width: 50em; } tbody{ height: 4em; overflow: auto; } td{ border: thin solid black; } </style> </head> <body> <table> <thead> <tr><th>start 1</th><th>start 2</th><th>start 3</th></tr> </thead> <tfoot> <tr><td>end 1</td><td>end 2</td><td>end 3</td></tr> </tfoot> <tbody> <tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> <tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> <tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> <tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> <tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> <tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> <tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> <tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> <tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> </tbody> </table> </body> </html> edit: changed TD to TH in the header row... Edited March 13, 2003 by Oogle Link to comment Share on other sites More sharing options...
0 Glowstick Posted March 13, 2003 Share Posted March 13, 2003 BTW regarding your sig, HTML 4.01 is obsolete, please link XHTML 1.0 :D Link to comment Share on other sites More sharing options...
0 RazorSA Posted March 13, 2003 Share Posted March 13, 2003 Can you give me an example of another site that has this feature ? Link to comment Share on other sites More sharing options...
0 Oogle Posted March 14, 2003 Share Posted March 14, 2003 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 More sharing options...
Question
Shadrack
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