Advanced CSS Design Resources - last-child.com » Table Body http://www.last-child.com CSS Toys for Professional Web Developers Thu, 08 Jul 2010 16:59:14 +0000 en hourly 1 http://wordpress.org/?v=3.0 Creating a table that scrolls with a fixed header and footer http://www.last-child.com/creating-a-table-that-scrolls-with-a-fixed-header-and-footer/ http://www.last-child.com/creating-a-table-that-scrolls-with-a-fixed-header-and-footer/#comments Sun, 26 Feb 2006 01:14:36 +0000 Ted http://www.last-child.com/creating-a-table-that-scrolls-with-a-fixed-header-and-footer/ I had a challenge today to create a table with a fixed header and foot. My first reaction was… oh no…. I pictured all sorts of hacks to make it work. I tried position: fixed, I tried extra divs, I tried this, I tried that, I even prayed to the Venus of Willendorf statue on my desk for a solution. When all else failed, I turned to the best resource for standards-based programming, my mother. Above the din of the Jerry Springer show on television, she yelled “What the hell do I know about tables?”

With Mom and my Venus drawing blanks, it was time to hit the message boards, the Standardista search, and Yahoo! Fortunately, Scott Swabey found this really cool approach: Fixed, Non-Scrolling Table Header and Footer by Brett Merkey.

Thinking Outside the Box

It’s pretty simple. Place the table in a div with overflow:auto. Then use absolute positioning to move the thead and tfoot outside the div. Voila, scrolling body with the thead and tfoot static.

Now, I can sleep happily knowing that the table can scroll, the venus has made me pregnant, and my mom was able to finish watching “I slept with my brother’s teacher’s husband!”

– This was originally published on www.tdrake.net

]]> http://www.last-child.com/creating-a-table-that-scrolls-with-a-fixed-header-and-footer/feed/ 1