« The day before it... | Main | [ANN] Apache Tomcat... »
20031204 Thursday December 04, 2003

Display Tag: Static Headers - Revisited I get a fair amount of hits on this site for my Display Tag: Static Headers post. When I originally wrote it, back in August, it didn't work in IE. So I asked the experts. I got a solution from that - split the tables and wrap the data table with a div that has style="height: 400px; overflow: auto". This works in IE, but since it's not easy to hack the HTML that the displaytag generates, this is an awkward solution.

Since my old demo disappeared when I updated struts-resume, I created a new one. This example shows how to do static headers in both IE and Mozilla - and the IE solution actually works in both. It's admittedly ugly, but it works. The major problem with this approach is getting the width of the top (header) cells to match up with the bottom (data) cells. I got them close using "th, td { width: 25%}" in my stylesheet, but that doesn't line them up exactly. If anyone knows of a better solution, let me know and I'll update the demo. Posted in Java at Dec 04 2003, 01:51:05 PM MST 4 Comments

Comments:

Ok, 2nd time. The difference on the left side of the table can be removed by changing the margin-left element of the div.tableBody element to 10% instead of auto. I've had no success with the difference on the right side of the table....Must be something with the styles...

Posted by Jakko Vos on December 04, 2003 at 03:13 PM MST #

Just change the width of the div.tableBody table element to 100%. The column divisions will line up. There still is the 1 or 2 pixel difference in width between the header and table body to cope with, but this should get you closer to the desired end-result.

Posted by Jakko Vos on December 04, 2003 at 03:40 PM MST #

!The other solution I've seen floating around the web: css expressions. IE only though I think. You can lock certain cells in place by in the css adding something along the lines of td.lockedCell{top:expression(document.getElementById('someId').scrollTop)} Problem is (apart from being proprietary) that IE becomes extremely slow and unresponsived if you lock any more than a few cells or rows. An alternative method I came up with and have been playing with: Let the browser render the page, then loop through and find the 'as rendered' width of the master cells and apply them to the child table cells. I've had the most success with this method. Although the app I'm developing this is PC IE6 only, I'm pretty sure this code is DOM compliant and would atleast work in mozilla. example below: {{{ <!DOCENGINE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Correcting table widths.</title> </head> <style> table { } table td { border: 1px solid #FF0000; padding:4px; margin:0px; } </style> <script> /** * takes the ids of two tables, loops through the rendered size of the second tables tds * and applies the sizings to the first. this allows the second table to be able to be * scrolled while keeping the first table locked in place as a header. * new and improved super-duper version does a reverse sweep on the sizing too, - incase the content in the header * row was bigger than the corresponding body element... should end up rendering shweeet except in very expectional circumstances. */ function correctTableCellWidth(incDependant, incMaster) { var aDependant = document.getElementById(incDependant); var aMaster = document.getElementById(incMaster); if ( aDependant==null || aMaster == null ) { alert("nullpointer - exiting method"); return; } var aDependantTDs = aDependant.children; var aMasterTDs = aMaster.children; if (aDependantTDs.length != aMasterTDs.length) { alert("inconsistantly sized tables - exiting method"); return; } for (i=0;i<aMasterTDs.length;i++) { aDependantTDs[i].width = aMasterTDs[i].clientWidth-(2*cropUnitToDigit(aMasterTDs[i].currentStyle.padding)); aMasterTDs[i].width = aDependantTDs[i].clientWidth-(2*cropUnitToDigit(aMasterTDs[i].currentStyle.padding)); } } /** * takes a css size unit string (example: "240px") and returns a number (example 240). */ function cropUnitToDigit(aString){ return parseInt(aString.substring(0,aString.indexOf("px"))); } </script> <body onLoad="correctTableCellWidth('particularDependantRow','particularMasterRow');"> <table> <tr id="particularDependantRow"> <td>--</td> <td>--</td> <td>--<div style="width:130px;height:30px;background-color:#666;">130px-non-shrinkable-element</div></td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> </tr> </table> <table> <tr id="particularMasterRow"> <td>fatter content</td> <td>hey more right here.</td> <td>fatter content</td> <td>hey more right here.</td> <td>fatter content</td> <td>hey more right here.</td> <td>fatter content</td> <td>hey more right here.</td> <td>fatter content</td> <td>hey more right here.</td> </tr> </table> </body> </html> }}}

Posted by James on March 08, 2004 at 04:14 PM MST #

does not work in IE7? Is there any working example in all the browsers tried both, http://homepage.mac.com/mraible/demos/staticHeaders.html and http://www.imaputz.com/cssStuff/bigFourVersion.html#

Posted by krishna on August 26, 2008 at 10:42 AM MDT #

Post a Comment:
  • HTML Syntax: Allowed