Dear all,
I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed for the html examples that I found out there this seems to work perfectly.
On the surface it also works perfectly in my xml / xsl implementation too (also based on html underneath). Indeed, using IE6*, you can take a look at a cut-down example by going to this link ...
http://alse.load4.net/scrollproblem/scrollproblem.xml
... and then selecting 'Milan', 'Report Test' and clicking on 'Run'.
This gives a nice scrolling list which is exactly what I want.
However ...
If you scroll to the bottom of the list in the scrolling area (the list is short as I have removed most of the data and all the reports except for this one) and then resize the window, the headers are distorted. With more data (which is normally the case for us) the distortion is even worse.
I have spent many hours tweaking my CSS (contain in the XSL file for convenience) and the HTML but just can't get rid of the 'distortion-on-resize' problem.
I am hoping that either ...
a.) There is a way to block the browser from being resized (I don't know if there is?)
... or ...
b.) Someone can take a look at my syntax and offer a suggestion to sort this out.
The source code can be obtained by clicking on the two hyperlinks 'xml file' and 'xsl file' included in the link. Indeed, I believe that the problem (and solution) may lie in some dynamic CSS declarations ( e.g. top: expression(offsetParent.scrollTop); /*IE5+ only*/ ) which I have obtained from various examples but don't understand completely.
Many thanks for any help that you can give as this could be a great little tool if we can sort out this last hurdle.
Regards,
Alan Searle
*: This solution is only designed to work with IE as that is what we have in-house.
CSS: Here are the CSS declarations which are contained in the XSL file ...
[code]
<style type="text/css" media="screen">
table {width: 99%;
background-color: #E2EFFE;
border-style: solid;
border-collapse:collapse;
border-color: #316AC5;}
table.displayframe {
background-color: white;
border: solid 1px #316AC5;}
h1 {margin-top: 1em; font-variant: normal;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
div.tableContainer {
width: 100%; /* table width will be 99% of this*/
height: 344px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;}
table.cont {
width: 98%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #E2EFFE;}
table.cont>tbody {
/* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 301px;
overflow-x: hidden;}
thead.cont tr {
border: none;
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}
thead.cont td, thead.cont th {
font-size: 14px;
background-color: white;
color: blue;
border: none;
/* border-top: solid 1px #d8d8d8; */
}
td.cont {
color: #000;
padding-right: 2px;
font-size: 8px;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;}
table.cont tfoot tr { /*to help IE*/
position: relative; overflow-x: hidden;
top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
}
a:link {text-decoration: underline;}
a:hover {text-decoration: underline;
color: #851D9E;}
a:visited {text-decoration: underline;
color: #8080C0;}
</style>
Scrolling table with CSS: Almost there!
