Geek Answers Handbook

Fixed Header Scrolling Table

I was looking for some solutions in PHP / HTML / CSS for this, but so far nothing has worked, maybe because most of these examples had a lot of code, so I got lost in it. Can someone explain to me what I need to do, or put some simple code examples here?

+1
source share
1 answer

This code (taken from the link in your comment) is the main code you need. Next time you will need to figure it out, just delete the code segments to see what happens and leave everything that won't break something that you need.

<html> <head> <style> div.tableContainer { clear: both; border: 1px solid #963; height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */ overflow: auto; width: 756px /* Remember to leave 16px for the scrollbar! */ } html>body tbody.scrollContent { display: block; height: 262px; overflow: auto; width: 100% } html>body thead.fixedHeader tr { display: block } html>body thead.fixedHeader th { /* TH 1 */ width: 200px } html>body thead.fixedHeader th + th { /* TH 2 */ width: 240px } html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */ width: 316px } html>body tbody.scrollContent td { /* TD 1 */ width: 200px } html>body thead.scrollContent td + td { /* TD 2 */ width: 240px } html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */ width: 316px } </style> </head> <body> <div id="tableContainer" class="tableContainer"> <table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable"> <thead class="fixedHeader"> <tr class="alternateRow"> <th><a href="#">Header 1</a></th> <th><a href="#">Header 2</a></th> <th><a href="#">Header 3</a></th> </tr> </thead> <tbody class="scrollContent"> <tr class="normalRow"> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr class="alternateRow"> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> ......... </tbody> </table> </div> </body> </html>
+2
source

More articles:


All Articles