Matt RaibleMatt Raible is a Web Developer and Java Champion. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

RECENT ENTRIES


Tag Cloud


abbie appfuse birthday denver family grails gwt jack java javascript jhipster jsf linkedin maven roller skiing softwaresummit spring springmvc struts2 travel trish vacation webframeworks wicket
« The day before it... | Main | [ANN] Apache Tomcat... »
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 09: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 09: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 10: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 04:42 PM MDT #

Post a Comment:
  • HTML Syntax: Allowed