RIRedinPA Posted January 19, 2009 Share Posted January 19, 2009 I am trying to make a table that has a horizontally scrolling headers but fixed when scrolled vertically (think Excel). After spending a few days attempting this I was able to make a solution that works in FF, Safari and IE6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <div id="outerdiv" style="position: relative; top: 100px; left: 100px; width: 900px; height: 200px; overflow-x: auto; overflow-y: hidden; border: 1px solid red;"> <div id="innerdivhead" style="position: absolute; top: 3px; left: 3px; width: 1200px; height: 25px; "> <table cellpadding="3" cellspacing="0" border="1"> <tr> <td width="300">Header 1</td> <td width="300">Header 2</td> <td width="300">Header 3</td> <td width="300">Header 4</td> </tr> </table> <div id="innerdivbody" style="position: absolute; top: 29px; left: 0px; width: 1200px; height: 175px; overflow-y: auto; "> <div id="tablediv" style="position: absolute; top: 6px; left: 0px; width: 1200px;"> <table cellpadding="3" cellspacing="0" border="1"> <tr> <td width="300">Cell 1</td> <td width="300">Cell 2</td> <td width="300">Cell 3</td> <td width="300">Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </div> </div> </div> </div> </body> </html> My problem is the end result needs to be more robust than this simple table. Each cell has to be editable. I can achieve this by placing form items in the cells (textarea, text input, checkboxes) and firing off some AJAX with an onchange handler. However, when I do the layout of the second table changes and the borders of both tables no longer line up, even with the hard coded widths. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <div id="outerdiv" style="position: relative; top: 100px; left: 100px; width: 900px; height: 200px; overflow-x: auto; overflow-y: hidden; border: 1px solid red;"> <div id="innerdivhead" style="position: absolute; top: 3px; left: 3px; width: 1200px; height: 25px; "> <table cellpadding="3" cellspacing="0" border="1"> <tr> <td width="300">Header 1</td> <td width="300">Header 2</td> <td width="300">Header 3</td> <td width="300">Header 4</td> </tr> </table> <div id="innerdivbody" style="position: absolute; top: 29px; left: 0px; width: 1200px; height: 175px; overflow-y: auto; "> <div id="tablediv" style="position: absolute; top: 6px; left: 0px; width: 1200px;"> <table cellpadding="3" cellspacing="0" border="1"> <tr> <td width="300"><textarea name="ta1" rows=4 cols=20>Test</textarea></td> <td width="300">Cell 2</td> <td width="300">Cell 3</td> <td width="300">Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </div> </div> </div> </div> </body> </html> I know about <thead> and <tbody> tags but couldn't get the table to scroll properly with them. Any ideas would be greatly appreciated. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.