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