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. Link to comment https://forums.phpfreaks.com/topic/141485-css-scrolling-table/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.